如何通过Webpack将SCSS文件分别编译为独立CSS文件？

我需要把项目里每个SCSS文件编译成对应的独立CSS文件，打算用Webpack做，但没找到合适的配置。期望的目录结构如下：

scss/
     |
     |– utilities/
     |   |– _variables.scss
     |   |– _mixins.scss
     |   |– _root.scss
     |
     |– base/
     |   |– _reset.scss
     |   |– _fonts.scss
     |   |– _root.scss
     |
     |– blocks/
     |   |– _root.scss
     |   |– _menu.scss
     |   |– _hero.scss
     |   |– _news_block.scss
     |   |– _root.scss
     |
     – _main.scss

css/
     |
     |– utilities/
     |   |– variables.css
     |
     |– base/
     |   |– reset.css
     |   |– fonts.css
     |
     |– blocks/
         |– menu.css
         |– hero.css
         |– news_block.css

index.html

项目里的mixins.scss是公共功能文件，各目录下的root.scss会引入该目录下所有SCSS文件。我当前的webpack.config.js配置如下，但执行npm start时出现各种错误：

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

module.exports = {
  entry: './scss/main.scss',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
  },
};

解决方案 #

要搞定每个SCSS文件对应生成独立CSS的需求，得调整Webpack的入口配置和MiniCssExtractPlugin的输出规则，同时处理好SCSS局部文件（下划线开头的_partial文件）的依赖问题。

完整配置代码

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 可选，用于清理dist目录
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); // 移除无用的空JS文件

module.exports = {
  // 手动指定需要编译的SCSS文件作为入口，key值对应输出的CSS路径
  entry: {
    'utilities/variables': './scss/utilities/_variables.scss',
    'base/reset': './scss/base/_reset.scss',
    'base/fonts': './scss/base/_fonts.scss',
    'blocks/menu': './scss/blocks/_menu.scss',
    'blocks/hero': './scss/blocks/_hero.scss',
    'blocks/news_block': './scss/blocks/_news_block.scss'
  },
  output: {
    path: path.resolve(__dirname, 'dist/css'), // 输出到dist/css目录下
    filename: '[name].js', // 临时生成的JS文件，后续会被移除
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // 全局引入公共的mixins和variables，不用每个文件手动@import
              additionalData: `
                @import "./scss/utilities/_mixins.scss";
                @import "./scss/utilities/_variables.scss";
              `
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 可选，每次编译前清空dist目录
    new FixStyleOnlyEntriesPlugin(), // 移除Webpack生成的空JS文件
    new MiniCssExtractPlugin({
      filename: '[name].css' // 对应入口的key生成CSS文件，路径完全匹配
    })
  ],
  devServer: {
    static: path.resolve(__dirname, './'), // 指向项目根目录，方便访问index.html
    compress: true,
    port: 8080
  }
};

关键说明

1. 入口配置：把每个需要输出的SCSS文件单独作为入口，key值就是输出CSS的路径（比如utilities/variables会生成dist/css/utilities/variables.css）。下划线开头的局部文件（比如_root.scss）不需要加入入口，它们只需要在对应目录的其他文件中引入即可。
2. 全局公共依赖：通过sass-loader的additionalData选项，自动全局引入_mixins.scss和_variables.scss，避免每个SCSS文件手动写@import。
3. 移除无用JS文件：Webpack默认会给每个入口生成JS文件，安装webpack-fix-style-only-entries插件可以自动删掉这些空的JS文件，只保留CSS。
4. 目录结构匹配：配置后编译出的CSS目录结构完全和你期望的一致，直接在dist/css下对应生成utilities、base、blocks三个子目录及对应文件。

额外步骤（如果需要自动遍历入口）

如果SCSS文件较多，手动写入口太麻烦，可以用Node.js脚本自动遍历scss目录，过滤出需要编译的文件，动态生成入口对象。示例代码如下：

const fs = require('fs');
const path = require('path');

function getSCSEntries() {
  const entries = {};
  const scssDir = path.resolve(__dirname, 'scss');

  function traverseDir(dir) {
    const files = fs.readdirSync(dir);
    files.forEach(file => {
      const fullPath = path.join(dir, file);
      const stats = fs.statSync(fullPath);
      if (stats.isDirectory()) {
        traverseDir(fullPath);
      } else if (file.endsWith('.scss') && !file.startsWith('_')) {
        const relativePath = path.relative(scssDir, fullPath).replace('.scss', '');
        entries[relativePath] = fullPath;
      }
    });
  }

  traverseDir(scssDir);
  return entries;
}

// 然后在module.exports里把entry替换成getSCSEntries()
entry: getSCSEntries(),

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