Webpack V4编译SCSS文件遇Module parse failed错误，请求解决

你遇到的这个错误很典型——Webpack本身没办法直接解析SCSS语法，必须靠对应的loader链来把SCSS转成它能处理的格式。先明确下你收到的核心报错：

Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.

接下来一步步帮你搞定这个问题：

1. 安装必要的依赖包 #

首先得装处理SCSS、CSS的loader，还有你用到的ExtractTextPlugin（注意Webpack 4需要装它的兼容版本）。打开终端运行：

npm install --save-dev sass-loader node-sass css-loader extract-text-webpack-plugin@next

如果node-sass安装失败（常见网络或环境问题），可以换成更稳定的dart-sass，命令改成：

npm install --save-dev sass-loader sass css-loader extract-text-webpack-plugin@next

2. 配置Webpack规则 #

修改你的webpack.config.js，添加处理.scss文件的规则，同时正确配置ExtractTextPlugin。完整的配置示例如下：

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

module.exports = {
  // 你的项目入口配置，比如：
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 新增SCSS处理规则
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          // 如果提取CSS失败，就用style-loader把CSS插入到页面DOM中兜底
          fallback: 'style-loader',
          // loader执行顺序是从右到左：先sass-loader转SCSS为CSS，再css-loader处理CSS
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    // 指定提取后的CSS文件名
    new ExtractTextPlugin('styles.css')
  ]
};

关键注意点 #

• loader顺序绝对不能乱：Webpack是从右往左执行loader的，所以必须把sass-loader放在css-loader后面，这样才能先把SCSS编译成CSS，再让css-loader处理。
• 如果是开发环境不想提取CSS到单独文件，只想快速调试，可以简化配置，不用ExtractTextPlugin：

  {
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  }
  

这样配置完之后，重新运行Webpack编译，应该就能正常处理SCSS文件了。

内容的提问来源于stack exchange，提问作者Chandra Shekhar