Webpack输出异常：SCSS编译后输出至错误文件，求排查配置问题

嘿，我来帮你排查这个问题！从你描述的情况来看，编译正常但文件输出不符合预期，大概率是Webpack的入口配置或者CSS提取插件的设置出了小问题，咱们一步步来梳理：

1. 先确认你的入口配置是否匹配需求 #

你提到有css.js和hero.js两个JS文件，我猜你是在这两个文件里分别引入了对应的SCSS（比如css.js里写了import './style.scss'，hero.js里写了import './hero.scss'）？如果是这种通过JS入口关联SCSS的方式，那Webpack的入口配置应该对应这两个JS文件：

module.exports = {
  // 入口key决定了最终输出文件的前缀
  entry: {
    style: './css.js', // 这里如果写`css: './css.js'`，会生成css.css而不是style.css
    hero: './hero.js'
  },
  // ...其他配置
}

如果你的入口key和期望的CSS文件名不匹配，就会出现输出文件名称不对的情况。

2. 检查MiniCssExtractPlugin的配置（核心！） #

现在Webpack提取CSS基本都用mini-css-extract-plugin（旧的ExtractTextPlugin已经被淘汰了），插件的filename配置直接决定输出的CSS文件名：

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

module.exports = {
  // ...入口配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 一定要用这个loader替换style-loader，才能提取到文件
          'css-loader', // 处理CSS模块
          'sass-loader' // 编译SCSS到CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // [name]会自动替换成入口配置里的key（比如上面的style/hero）
      filename: '[name].css'
      // 如果你想把CSS放到单独的目录，就写`css/[name].css`
    })
  ]
}

如果这里的filename写死成了固定值（比如style.css），那所有SCSS都会被打包到同一个文件里，这肯定不是你想要的。

3. 避免重复配置CSS处理规则 #

要是你在配置里同时用了style-loader和MiniCssExtractPlugin.loader，就会出问题——style-loader是把CSS注入到页面的<style>标签里，而MiniCssExtractPlugin.loader是提取到独立文件，两者不能同时用在同一个规则里。开发环境可以用style-loader方便热更新，生产环境换成MiniCssExtractPlugin.loader就行。

4. 清理缓存后重新编译 #

有时候Webpack的缓存会残留旧的输出文件，导致你看到的不是最新的编译结果。可以试试执行webpack --clean（Webpack 5+自带这个清理功能），或者手动删除输出目录（比如dist）后重新运行编译命令。

另外，如果你的需求是直接把SCSS文件作为Webpack入口（不需要通过JS引入），那入口配置可以直接写SCSS文件：

entry: {
  style: './style.scss',
  hero: './hero.scss'
}

这种方式也能生成对应的独立CSS文件，不过更推荐通过JS入口关联SCSS，因为这更符合Webpack“一切皆模块”的设计理念，后续如果需要在JS里用到CSS模块也更方便。

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