在 React 中设置 Sass 和 CSS 模块时的 Webpack 问题答案

【问题标题】：Webpack issues when setting up Sass and CSS modules in React在 React 中设置 Sass 和 CSS 模块时的 Webpack 问题
【发布时间】：2019-05-14 19:12:24
【问题描述】：

我的应用无法编译，当我尝试 npm install 时，我看到了：

npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

但是，这只是在我将此插件添加到我的 webpack.config.dev.js 时才开始发生的：

new ExtractTextPlugin({ filename: 'styles.css', allChunks: true }),

当我尝试运行我的应用程序时，我得到以下信息：

/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Chunk.js:824 抛出新错误（ ^

错误：Chunk.entrypoints：使用 Chunks.groupsIterable 并过滤 instanceof 入口点代替在 Chunk.get (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Chunk.js:824:9) 在 /Users/johnnynolan/Repos/clark-app/node_modules/extract-text-webpack-plugin/dist/index.js:176:48 在 Array.forEach () 在 /Users/johnnynolan/Repos/clark-app/node_modules/extract-text-webpack-plugin/dist/index.js:171:18 在 AsyncSeriesHook.eval [as callAsync] （创建时的评估（/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10）， :7:1) 在 AsyncSeriesHook.lazyCompileHook (/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/Hook.js:154:20) 在 Compilation.seal (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compilation.js:1214:27) 在 hooks.make.callAsync.err (/Users/johnnynolan/Repos/clark-app/node_modules/webpack/lib/Compiler.js:547:17) 在_done（创建时的评估（/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10）， :11:1) 在_err1（创建时的评估（/Users/johnnynolan/Repos/clark-app/node_modules/tapable/lib/HookCodeFactory.js:32:10）， :34:22)

【问题讨论】：

你使用的是什么版本的 webpack？

标签： webpack sass css-modules

【解决方案1】：

ExtractTextPlugin 已弃用。取而代之的是，您可以使用 style-loader、css-loader 和 postcss-loader，方法是将以下代码添加到您的 webpack 并安装所需的包。

{
  test: /\.scss$/,
  use: [{
      loader: 'style-loader' // creates style nodes from JS strings
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64:5]"
      } // compiles Sass to CSS
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        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',
          }),
        ],
      },
    },
  ],
},

【讨论】：