时间戳

首页 > 解决方案 > create-react-app 中的 css 模块在生产中不起作用（heroku）

heroku - create-react-app 中的 css 模块在生产中不起作用（heroku）

问题描述

我阅读了关于这个主题的所有可能的问题，但没有找到任何对我有帮助的东西。

我使用 create-react-app 构建反应应用程序并想使用 css 模块。所以我更改了node_modules/react-scripts/config中的 weback 文件，因为我不想“弹出”配置文件。

在开发上一切正常，它可以识别模块，但在生产上它不起作用。（无论如何，在开发中不存在“ExtractTextPlugin”插件）

所以，最后我尝试“弹出”配置文件，然后更改在 src/config 中找到的 webpack prod 文件并且它可以工作，但我真的不想为此弹出所有配置文件。

我还尝试复制完全相同的 webpack.config.prod.js 文件，该文件在弹出后可以工作，但由于某种原因它没有帮助

这是我的 webpack.config.prod.js 中的代码：

        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          Object.assign(
            {
              fallback: {
                loader: require.resolve('style-loader'),
                options: {
                  hmr: false,
                },
              },
              use: [
                {
                  loader: require.resolve('css-loader'),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    localIdentName: '[name]__[local]__[hash:64:5]',
                    //   minimize: true,
                    //   sourceMap: shouldUseSourceMap,
                  },
                },
                {
                  loader: require.resolve('postcss-loader'),
                  options: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebookincubator/create-react-app/issues/2677
                    ident: 'postcss',
                    plugins: () => [
                      require('postcss-flexbugs-fixes'),
                      autoprefixer({
                        browsers: [
                          '>1%',
                          'last 4 versions',
                          'Firefox ESR',
                          'not ie < 9', // React doesn't support IE8 anyway
                        ],
                        flexbox: 'no-2009',
                      }),
                    ],
                  },
                },
              ],
            },
            extractTextPluginOptions
          )
        ),
        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.

我在 prod 文件中为此尝试了许多其他配置，但对 prod 没有任何影响。

全部

标签： herokuwebpackcreate-react-appwebpack-style-loaderreact-css-modules

解决方案

弹出创建反应应用程序

调整webpack.config.prod.js

代替：

{
  loader: require.resolve('css-loader'),
  options: {
   importLoaders: 1,
   minimize: true,
   sourceMap: shouldUseSourceMap,
  },
},

对此：

{
  loader: require.resolve('css-loader'),
  options: {
   importLoaders: 1,
   minimize: true,
   modules: true
   sourceMap: shouldUseSourceMap,
  },
},

推荐阅读