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

Question

我想使用 codegen.macros 加载基于网络或本机输出的不同库。但是我的网络组件需要加载 css / scss 文件。我真的用谷歌搜索了我，但我找不到运行示例如何调整 webpack.config.js 以拥有 css/scss 加载程序运行 Expo Web（react-native -web).

Expo 是强制性的。

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

我知道在 JS 中 React Native 需要 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
}

Answer 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 文件了！

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

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

css

react-native

webpack

expo

react-native-web