如何通过Webpack将SCSS文件转CSS并保留目录结构？

我需要将SCSS文件转换为CSS文件，同时保留原有的目录结构。示例如下：
编译前路径：
/sass/plugins/plugin1/file1.scss
/sass/plugins/plugin2/fileA.scss
/sass/plugins/pluginC/file3.scss
/sass/template/template1.scss
/sass/folder1/style.scss
/sass/style.scss
编译后期望路径：
/css/plugins/plugin1/file1.css
/css/plugins/plugin2/fileA.css
/css/plugins/pluginC/file3.css
/css/template/template1.css
/css/folder1/style.css
/css/style.css
请问该如何配置Webpack实现此需求？

这其实是Webpack处理样式文件时非常常见的需求，核心就是要让输出的CSS文件路径和原SCSS文件在sass目录下的相对结构完全对齐，下面是具体的实现步骤：

1. 安装必要的依赖 #

首先得把Webpack和处理SCSS、提取CSS的工具包装起来，打开终端运行：

npm install webpack webpack-cli sass-loader sass css-loader mini-css-extract-plugin glob webpack-remove-empty-scripts --save-dev

这里简单说下每个包的作用：

• webpack & webpack-cli：Webpack核心和命令行运行工具
• sass-loader + sass：负责把SCSS语法编译成标准CSS
• css-loader：解析CSS中的@import和url()等依赖语法
• mini-css-extract-plugin：把编译后的CSS提取成单独文件（而不是默认注入到JS里）
• glob：自动批量匹配sass目录下的所有SCSS文件，不用手动逐个写入口
• webpack-remove-empty-scripts：清理Webpack自动生成的空JS文件（因为Webpack本质是打包JS，SCSS作为入口会生成无用的空JS）

2. 编写Webpack配置文件 #

在项目根目录创建webpack.config.js，复制以下配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const glob = require('glob');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

// 自动匹配sass目录下所有SCSS文件，生成对应的入口配置
const entry = glob.sync('./sass/**/*.scss').reduce((acc, filePath) => {
  // 生成入口名称：去掉开头的./sass/和结尾的.scss，保留中间的路径结构
  const entryName = filePath.replace('./sass/', '').replace('.scss', '');
  acc[entryName] = filePath;
  return acc;
}, {});

module.exports = {
  // 配置入口：所有匹配到的SCSS文件
  entry: entry,
  output: {
    // 输出根目录设置为css
    path: path.resolve(__dirname, 'css'),
    // 临时生成的JS文件路径（会被RemoveEmptyScriptsPlugin清理）
    filename: '[name].js',
    // 每次编译前清空css目录，避免残留旧文件
    clean: true
  },
  module: {
    rules: [
      {
        // 匹配所有SCSS文件
        test: /\.scss$/i,
        use: [
          // 提取CSS到单独文件
          MiniCssExtractPlugin.loader,
          // 解析CSS依赖
          'css-loader',
          // 编译SCSS为CSS
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    // 配置CSS输出路径，[name]对应我们生成的入口名称（即原SCSS文件的相对路径）
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    // 移除自动生成的空JS文件
    new RemoveEmptyScriptsPlugin()
  ],
  // 生产模式会自动压缩CSS，开发时可以改成'development'
  mode: 'production'
};

3. 执行编译 #

在终端运行：

npx webpack

运行完成后，你就会看到css目录下生成了和sass目录结构完全一致的CSS文件啦！

额外小技巧 #

如果需要监听文件变化自动重新编译，可以在package.json的scripts里添加：

"scripts": {
  "build:css": "webpack",
  "watch:css": "webpack --watch"
}

之后运行npm run watch:css就能实时监听SCSS文件修改，自动编译成CSS。

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