在 Expo Web (react-native-web) 中使用 style-loader / css-loader答案

【问题标题】：Use style-loader / css-loader in Expo Web (react-native-web)在 Expo Web (react-native-web) 中使用 style-loader / css-loader
【发布时间】：2021-10-18 20:41:36
【问题描述】：

我想使用 codegen.macros 根据 Web 或本机输出加载不同的库。但是我的 web 组件需要加载 css / scss 文件。我真的在谷歌上搜索了一下，但我找不到一个运行示例如何调整 webpack.config.js 以使 css/scss 加载器与 Expo Web (react-native-web) 一起运行。

博览会是强制性的。

它总是以“无法解析 ....css”结束。

我知道 react native 需要 JS 中的 CSS，但我的方法将加载基于 web 或本地 (ios / android) 的不同组件。

我的设置已经运行良好，但我无法加载和注入第三方 css 文件。这是我的 webpack.config.js 文件。

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
}

【问题讨论】：

看起来 CSS 加载器运行良好，我在导入时出错了。但我无法导入 SCSS 文件。他们确实导入没有错误，但不会注入 scss 样式

标签： css react-native webpack expo react-native-web

【解决方案1】：

经过多次反复试验，我设法自己修复了它。

我像这样调整了我的 webpack.config.js。

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
}

由于 Expo 在后台使用 Webpack 4，因此您需要安装这些包：

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"
  },

使用 sass-loader 10.1.1 和 mini-css-extract-plugin 1.6.2 很重要。

我终于可以在 Expo Web 中导入 .css 和 .scss 文件了！

【讨论】：