CSS 模块在部署到 Firebase 时没有为我的应用设计样式。创建 React 应用程序

Question

我更改了 config 文件夹和 node_modules/react-scripts/config 文件夹中的 webpack.config.dev.js 和 webpack.config.prod.js 以允许这样的 CSS 模块:

test: /\.css$/,
loader: ExtractTextPlugin.extract(
  Object.assign(
    {
      fallback: require.resolve('style-loader'),
      use: [
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
                        modules: true,
                        localIdentName: '[name]__[local]__[hash:base64:5]'

当我使用 npm start 在开发模式下运行我的应用程序时，它工作正常并且 CSS 模块正确应用。

但是，当我构建我的应用并将其部署到 Firebase 时，CSS 样式消失了。

这是一个常见问题吗？我该如何解决？

Answer 1

如果你升级到 react-scripts 版本 2，你不需要弹出来让它工作。构建将自动使用 css 模块。我建议使用 yarn upgrade react-scripts@latest

将你的 react-scripts 升级到 v2

然后重新运行 yarn build 并查看部署是否正常。您不需要为此修改您的 webpack 配置。