在React组件中导入.scss文件时出现Module build failed错误

嘿，我来帮你搞定这个问题！从你给出的package.json配置来看，核心问题出在Webpack 4和extract-text-webpack-plugin@4.0.0-beta.0的兼容性上——这个beta版本的插件对Webpack 4的支持并不完善，而且Webpack官方早就推荐用mini-css-extract-plugin来替代它了。

问题根源 #

你用的Webpack版本是^4.4.1，但extract-text-webpack-plugin的4.x beta版本属于过渡版本，存在不少兼容bug，这就是导致你构建失败的直接原因。

两种解决方案 #

方案1：换成官方推荐的mini-css-extract-plugin（强烈推荐） #

这是目前最稳妥的方案，步骤很清晰：

1. 先卸载旧的extract-text-webpack-plugin：

npm uninstall extract-text-webpack-plugin --save-dev

2. 安装mini-css-extract-plugin：

npm install mini-css-extract-plugin --save-dev

3. 修改你的webpack配置文件，替换掉原来的extract-text插件用法：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他已有的配置
  module: {
    rules: [
      // ...其他loader规则（比如babel-loader那些）
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 替换原来的ExtractTextPlugin.extract
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css', // 可以根据你的需求调整输出的css文件名
      chunkFilename: '[id].css'
    })
    // ...其他插件
  ]
};

方案2：降级Webpack到3.x版本（不推荐，除非你有特殊需求） #

如果你非要继续用extract-text-webpack-plugin，可以把Webpack降到3.x版本，因为这个插件的稳定版本是针对Webpack 3做的：

1. 卸载当前的Webpack：

npm uninstall webpack --save-dev

2. 安装Webpack 3.x的稳定版本（比如3.12.0）：

npm install webpack@3.12.0 --save-dev

3. 换成extract-text-webpack-plugin的稳定版本：

npm uninstall extract-text-webpack-plugin --save-dev
npm install extract-text-webpack-plugin@3.0.2 --save-dev

4. 调整webpack配置为Webpack 3的写法：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他loader规则
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css') // 自定义输出的css文件名
  ]
};

额外小提示 #

• 开发环境下其实可以不用提取CSS，直接用style-loader把样式注入到页面里，这样热更新会更快更顺畅，只在生产环境用mini-css-extract-plugin提取CSS就好啦。
• 建议你把css-loader和sass-loader升级到和Webpack版本兼容的版本，比如Webpack 4搭配css-loader^3.0.0以上会更稳定（不过你当前的版本也能凑合用，只是升级后bug更少）。

内容的提问来源于stack exchange，提问作者Giambi Huang