Webpack突然停止编译Sass问题求助（附配置代码）

我来帮你排查这个头疼的问题——这种情况我自己在构建WordPress主题时也碰到过，大概率是入口文件引用、Loader配置或者缓存的问题，咱们一步步来解决：

1. 先确认入口文件是否引入了Sass文件 #

Webpack只会处理入口文件（你这里是./js/app.js）以及它依赖的所有文件，如果你的Sass文件没有在app.js里被引入，Webpack根本不知道要去编译它！

打开js/app.js，确保有类似这样的代码（替换成你实际的Sass文件路径）：

// 引入你的主Sass文件，比如主题根目录下的style.scss
import '../style.scss';

2. 修正Sass Loader的配置问题 #

看了你的Webpack配置，Sass Loader的配置有几个可以优化的点，这很可能是导致不编译、不报错的原因：

问题点：Source Map配置不全 #

resolve-url-loader需要依赖上游Loader的Source Map才能正确解析路径，你现在只给sass-loader加了sourceMap，但css-loader和resolve-url-loader也需要开启Source Map，否则可能导致编译静默失败。

修改后的Sass Loader配置 #

把原来的scss loader规则改成下面这样（Webpack 2+推荐用use替代loaders，语法更清晰）：

{
  test: /\.scss$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { sourceMap: true } },
    { loader: 'resolve-url-loader', options: { sourceMap: true } },
    { loader: 'sass-loader', options: { sourceMap: true } }
  ]
}

额外：合并重复的字体Loader规则 #

你的配置里有两组处理字体文件的规则，这可能会导致冲突，建议合并成一组：

{
  test: /\.(woff|woff2|ttf|eot|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000, // 小于10kb的字体转成DataURL，大于的生成文件
        name: '[name].[ext]',
        outputPath: 'fonts/' // 字体文件输出到dist/fonts目录
      }
    }
  ]
}

3. 清理Webpack缓存 #

有时候Webpack的缓存会“记住”旧的编译结果，导致修改后不重新编译。你可以：

• 删除项目根目录下的dist文件夹
• 执行webpack --watch --no-cache强制跳过缓存重新编译

4. 检查依赖版本兼容性 #

Webpack和相关Loader的版本不兼容也会导致静默失败，比如sass-loader和node-sass的版本要对应，Webpack 4+需要sass-loader v8+，Webpack 5需要sass-loader v10+。

你可以尝试重新安装依赖：

rm -rf node_modules && rm package-lock.json yarn.lock && yarn install

5. 开启错误检测的必要配置 #

为了让Webpack能检测到SCSS的语法错误，建议在Webpack配置里加上devtool：

module.exports = function(env) {
  'use strict';
  return {
    // ...其他配置
    devtool: 'source-map', // 生成Source Map，帮助捕获编译错误
    // ...
  }
}

最后测试 #

做完以上步骤后，故意写一段错误的SCSS代码（比如$test: ;），然后执行webpack，如果配置正确，应该会看到清晰的错误提示，说明编译检测正常了。

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