Webpack 5如何将SCSS文件编译为独立CSS文件并监听整个SCSS目录？

我帮你梳理了一套完全适配需求的Webpack配置，能轻松实现把SCSS文件夹下的每个.scss文件单独编译为对应的.css文件输出到dist目录，同时支持实时监听文件夹内的文件变化自动重新编译。

第一步：安装必要依赖 #

首先确保你已经安装了Webpack及相关loader和插件，执行以下命令：

npm install webpack webpack-cli sass-loader sass css-loader mini-css-extract-plugin --save-dev

第二步：配置webpack.config.js #

创建或修改项目根目录下的webpack.config.js，核心是自动生成多入口并正确配置MiniCssExtractPlugin：

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

// 自动扫描scss文件夹下的所有scss文件，生成入口配置
const generateEntries = () => {
  const scssFolder = path.resolve(__dirname, 'scss');
  const fileList = fs.readdirSync(scssFolder);
  const entryMap = {};

  fileList.forEach(fileName => {
    if (fileName.endsWith('.scss')) {
      // 去掉文件后缀作为入口名称
      const entryName = fileName.replace('.scss', '');
      entryMap[entryName] = path.join(scssFolder, fileName);
    }
  });

  return entryMap;
};

module.exports = {
  // 自动生成多入口：每个scss文件对应一个入口
  entry: generateEntries(),
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 这里的js文件是Webpack默认输出的，可以忽略或后续清理，我们只关心CSS输出
    filename: '[name].js',
    clean: true // 每次构建自动清空dist目录，避免冗余文件
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        // loader顺序很重要：从右到左执行，先编译SCSS为CSS，再解析CSS，最后提取为单独文件
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 输出的CSS文件名和入口名保持一致，比如main.scss -> main.css
      filename: '[name].css'
    })
  ],
  // 开启监听模式
  watch: true,
  watchOptions: {
    ignored: /node_modules/, // 忽略node_modules的变化，提升监听效率
    poll: 1000 // 可选：每隔1秒检查一次文件变化，适配部分文件系统
  }
};

第三步：配置npm脚本 #

在项目的package.json中添加以下脚本命令：

{
  "scripts": {
    "build": "webpack", // 一次性编译所有SCSS文件
    "watch": "webpack --watch" // 开启实时监听模式
  }
}

如何运行 #

• 执行npm run watch：启动监听模式，修改SCSS文件夹内的任何文件，Webpack都会自动重新编译对应的CSS文件到dist目录
• 执行npm run build：一次性编译所有SCSS文件到dist目录

常见问题排查 #

如果你之前配置失败，大概率是这几个原因：

• 入口配置错误：没有将每个SCSS文件单独作为入口，而是只配置了一个入口文件
• Loader顺序错误：MiniCssExtractPlugin.loader必须放在css-loader之前，Webpack的loader是从右到左执行的
• 插件配置错误：MiniCssExtractPlugin的filename没有设置为[name].css，导致所有CSS合并成一个文件

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