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

sxpgvts3 于 2023-04-21 发布在 Webpack

关注(0)|答案(2)|浏览(135)

我想使用codegen.macros来加载基于web或本机输出的不同库。但是我的web组件需要加载css / scss文件。我真的在谷歌上搜索了很久，但是我找不到一个运行的例子，如何调整webpack.config.js来让一个css/scss加载器与Expo Web（react-native-web）一起运行。
世博会是强制性的。
它总是以“cant resolve... css”结束。
我知道react native需要JS中的CSS，但我的方法将加载基于Web或native（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
}

webpack

来源：https://stackoverflow.com/questions/68808880/use-style-loader-css-loader-in-expo-web-react-native-web

2条答案

按热度按时间

ttcibm8c1#

我自己试了很多次才把它修好。
我这样调整了我的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文件了！

赞(0）回复(0）举报 2023-04-21

ncecgwcz2#

需要在app.json中添加webpack bundler属性到expo web对象中：

/* app.json */
{
  "expo": {
    ...,
    "web": {
      "bundler": "metro", /* Expo Web uses webpack by default */
      ...
    },
    ...
  }
}

以下是github上关于这个风格的scss博览会的讨论：https://github.com/kristerkari/react-native-sass-transformer/issues/32

赞(0）回复(0）举报 2023-04-21

我来回答

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

2条答案

相关问题

热门标签

最新问答