Webpack 4：将SCSS单独编译为独立CSS文件的配置问题

嘿，我来帮你搞定Webpack 4编译SCSS的问题！你现在JS编译正常但SCSS出问题，大概率是ExtractTextPlugin的配置没到位，或者缺少必要的loader。下面给你一套能满足需求的配置，再拆解关键要点和调试方法：

const path = require('path');
// 注意：Webpack 4需要适配的ExtractTextPlugin版本
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    // 分别指定JS和SCSS的入口文件
    index: './src/js/index.js',
    style: './src/css/style.scss'
  },
  output: {
    filename: 'js/[name].js', // 输出到static/js目录，文件名对应entry的key
    path: path.resolve(__dirname, 'static'),
    clean: true // 每次编译自动清空static目录，可选但实用
  },
  module: {
    rules: [
      // 处理ES6 JavaScript的规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 处理SCSS的核心规则
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // 开发环境下可注入CSS到页面（可选）
          use: [
            'css-loader', // 解析CSS中的import、url等语法
            'sass-loader' // 把SCSS编译为原生CSS
          ]
        })
      }
    ]
  },
  plugins: [
    // 配置ExtractTextPlugin输出CSS文件的路径
    new ExtractTextPlugin({
      filename: 'css/[name].css', // 输出到static/css目录
      allChunks: true
    })
  ],
  mode: 'production' // 可切换为development用于开发调试
};

• 入口必须包含SCSS：Webpack只会处理你在entry里指定的文件，之前没把SCSS加入entry的话，Webpack根本不会触发它的编译流程。
• 安装适配版本的插件：Webpack 4不能用最新版的ExtractTextPlugin，得装兼容的beta版：

  npm install extract-text-webpack-plugin@4.0.0-beta.0 --save-dev
  

• 安装必要的loader依赖：别漏了这些处理SCSS和ES6的工具：

  npm install css-loader sass-loader node-sass babel-loader @babel/core @babel/preset-env --save-dev
  

  （如果node-sass安装失败，直接换成sass（dart-sass）就行，sass-loader会自动适配）

如果配置完还是不行，按下面的方法定位问题：

• 看控制台报错：运行webpack命令时，控制台会输出具体错误，比如路径不对、缺少依赖、loader配置错误等，这是最直接的线索。
• 验证文件路径：确认./src/css/style.scss的路径是正确的，Webpack找不到文件会明确提示。
• 简化配置调试：先暂时去掉ExtractTextPlugin，只用style-loader+css-loader+sass-loader，看能不能把SCSS注入到页面里，先排除loader本身的问题，再重新加插件。
• 切换开发模式：把mode改成development，Webpack会输出更详细的日志，方便你找到哪里出问题。

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