Webpack+SASS+Autoprefixer无法生成main.min.css求助

看起来你遇到的核心问题是输出路径配置不匹配，加上Webpack 4+要求的mode未设置，导致CSS文件没有生成到你期望的位置。我帮你梳理下问题点和修正方案：

问题分析 #

• 输出路径错位：你的output.path指向了./js/new-theme，而MiniCssExtractPlugin生成的CSS文件路径是相对于这个output.path的。所以当前配置下，CSS会被生成到js/new-theme/main.min.css，而不是你想要的css目录。
• 缺少mode配置：Webpack 4+强制要求指定mode（development或production），这就是你看到mode警告的原因。另外，production模式会自动启用CSS和JS的压缩，刚好满足你"压缩文件"的需求。
• 冗余的空JS文件：你把SCSS单独作为一个entry，Webpack会生成一个对应的空JS文件（比如style.min.js），这完全没必要——更好的做法是在你的JS入口文件中引入SCSS，让Webpack按照模块依赖来处理样式。

修正后的配置 #

1. 更新webpack.config.js #

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

module.exports = {
  // 新增mode配置，production模式自动启用压缩
  mode: 'production',
  plugins: [
    new MiniCssExtractPlugin({
      // 直接指定CSS输出到项目根目录的css文件夹下
      filename: '../css/main.min.css'
    }),
  ],
  entry: {
    // 移除单独的style entry，改为在main.js中引入SCSS
    script: './src/scripts/main.js'
  },
  output: {
    path: path.resolve(__dirname, './js/new-theme'),
    filename: 'main.min.js',
    publicPath: './js/new-theme'
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              [ '@babel/preset-env', {
                "targets": {
                  "browsers": [
                    "last 2 versions",
                    "chrome >= 71",
                    "ie >= 11",
                    "ios >= 8",
                    "android >= 5",
                    "safari >= 10",
                    "firefox >= 61"
                  ]
                },
                "useBuiltIns": "usage",
                "corejs": 3
              } ]
            ],
            "plugins": [ ["@babel/transform-runtime"] ]
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')
              ]
            }
          },
          "sass-loader"
        ]
      }
    ]
  }
}

2. 在JS入口中引入SCSS #

打开src/scripts/main.js，添加一行：

import '../styles/main.scss';

3. 可选：简化PostCSS配置 #

你可以在项目根目录新建postcss.config.js，把PostCSS的配置抽离出来，这样webpack.config.js更简洁：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

然后webpack里的postcss-loader配置可以简化为：

{ loader: "postcss-loader" }

验证方案 #

执行npm run build后，你应该能在root/css目录下看到main.min.css，同时root/js/new-theme下有main.min.js，而且mode警告也会消失。

如果还是有问题，可以检查：

• 确保src/styles/main.scss文件存在且路径正确
• 执行npm install确保所有依赖都安装完整
• 查看Webpack的输出日志，确认是否有隐藏的错误（有时候警告后面会有细节）

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