Use style-loader / css-loader in Expo Web (react-native-web)

Question

I want to use codegen.macros to load different libs based on web or native output. But my web components need to load css / scss files. I really googled the heck out of me, but I can't find a running example how to adjust webpack.config.js to have a css/scss loader running with Expo Web (react-native-web).

Expo is mandatory.

It always ends up with "cant resolve ....css".

I know that react native need CSS in JS but my approach will load a different component based for web or native (ios / android).

My setup is already working pretty decent but I can't manage to load and inject a third party css file. This is my webpack.config.js file.

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
            ...env,
            // Passing true will enable the default Workbox + Expo SW configuration.
        },

        argv
    );
    // Customize the config before returning it.

    config.module.rules.push({
        test: /\.((c|sa|sc)ss)$/i,
        use: [{
                loader: 'style-loader',
            },
            {
                loader: 'css-loader',
            },
            {
                loader: 'postcss-loader',
            },
            {
                loader: 'sass-loader',
            },
        ],
    }, );

    return config
}

Answer 1

I managed to fix it on my own with a lot trial and error.

I adjusted my webpack.config.js like so.

const createExpoWebpackConfigAsync = require('@expo/webpack-config')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
            ...env,
            // Passing true will enable the default Workbox + Expo SW configuration.
        },

        argv
    );
    // Customize the config before returning it.

    config.module.rules.push({
        test: /\.((sc)ss)$/i,
        use: [
            // Creates `style` nodes from JS strings
            MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            "css-loader",
            // Compiles Sass to CSS
            "sass-loader",
        ],
    }, );


    config.plugins = config.plugins.concat(
        [
            new MiniCssExtractPlugin()
        ]
    );

    return config
}

Since Expo uses Webpack 4 under the hood, you need to install these packages:

package.json

  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@expo/webpack-config": "^0.14.0",
    "@types/react": "~17.0.18",
    "@types/react-native": "~0.63.2",
    "@types/react-slick": "^0.23.5",
    "css-loader": "^6.2.0",
    "jest-expo": "~42.1.0",
    "mini-css-extract-plugin": "^1.6.2",
    "sass": "^1.37.5",
    "sass-loader": "^10.1.1",
    "sass-resources-loader": "^2.2.4",
    "style-loader": "^3.2.1",
    "typescript": "~4.3.5"
  },

It is important to use sass-loader 10.1.1 and mini-css-extract-plugin 1.6.2.

And I can finally import .css and .scss files in Expo Web!