Webpack 4编译SCSS转CSS异常求助：无报错但未生成目标文件

兄弟，看你贴的配置明显没写完，而且几个关键环节大概率没配置到位，咱们一步步来解决：

核心问题排查点 #

• output配置不完整：你贴的代码里output只写了path的开头，Webpack需要明确的输出路径和文件名，哪怕用默认值也得确保配置完整。
• 缺少SCSS处理的loader规则：Webpack本身不认识SCSS，必须配置sass-loader、css-loader加上你用的MiniCssExtractPlugin.loader来处理SCSS文件。
• MiniCssExtractPlugin未实例化：光引入插件没用，得在plugins数组里创建插件实例，指定输出的CSS文件名。
• 入口文件未引入SCSS：Webpack是依赖驱动的，如果你在index.js里没import你的SCSS文件，Webpack根本不会去处理它。

修正后的完整配置示例 #

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: { App: './public/javascript/index.js' },
  devtool: "source-map",
  output: {
    // 补全输出路径，比如编译到dist文件夹
    path: path.resolve(__dirname, 'dist'),
    // JS文件的输出命名规则
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        // 匹配所有.scss文件
        test: /\.scss$/,
        // 从右到左执行loader：先sass-loader转SCSS为CSS，再css-loader处理import等，最后用MiniCssExtractPlugin抽成单独文件
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              plugins: () => [autoprefixer()]
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  plugins: [
    // 实例化插件，指定输出的CSS文件名
    new MiniCssExtractPlugin({
      filename: '[name].bundle.css'
    })
  ]
};

额外检查步骤 #

1. 确保你已经安装了所有需要的依赖：

npm install --save-dev mini-css-extract-plugin css-loader sass-loader sass postcss-loader autoprefixer

（注：新版Node建议用sass替代node-sass，避免兼容问题）

2. 在你的./public/javascript/index.js里引入SCSS文件，比如：

// 引入你的主SCSS文件，路径根据实际项目结构调整
import '../styles/main.scss';

做完这些再重新运行Webpack编译，应该就能生成预期的CSS文件了。

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