Webpack配置问题：编译无报错但未输出CSS文件

嘿，我仔细看了你的Webpack配置，问题其实很清晰——你虽然初始化了ExtractTextPlugin，但既没在样式加载规则里调用它，也没把插件实例加到plugins数组中，所以Webpack根本没执行提取CSS的逻辑！

下面是具体的修复步骤：

1. 修改SCSS/CSS的加载规则 #

你当前的样式规则用的是['to-string-loader', 'css-loader', 'sass-loader']，这会把样式转成字符串嵌入到JavaScript bundle里，而不是提取成单独文件。我们需要用extractSass实例的extract()方法来包裹加载器：

{
  test: /\.(css|scss)$/,
  use: extractSass.extract({
    fallback: 'to-string-loader', // 插件禁用时（比如开发环境）的备用加载器
    use: ['css-loader', 'sass-loader'] // 提取时使用的加载器
  })
}

这个配置的作用是：生产环境下，插件会把所有SCSS/CSS提取成单独的.css文件；开发环境下（因为你设置了disable: process.env.NODE_ENV === "development"），会 fallback 到to-string-loader，把样式嵌入到代码中，方便热重载。

2. 将ExtractTextPlugin实例添加到plugins数组 #

你已经创建了extractSass实例，但没把它加入到plugins列表里，Webpack不会自动启用它。在plugins数组末尾添加这个实例：

plugins: [
  // 其他插件...
  new HtmlWebpackPlugin({
    template: 'src/index.html'
  }),
  extractSass // 加入这一行
]

额外检查点 #

• 确保你已经正确安装了所有依赖：extract-text-webpack-plugin、sass-loader、node-sass（sass-loader依赖它）、css-loader这些都不能少。
• 如果你的Webpack版本是4.x，注意extract-text-webpack-plugin需要安装@next版本（不过从你的配置里用CommonsChunkPlugin来看，应该是Webpack 3.x，所以没问题）。

做完这些修改后，重新执行构建命令，dist目录里就会生成对应的.css文件啦！

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