如何让Webpack将SCSS编译为CSS后按源结构单独复制到指定目录？

核心思路 #

弃用之前的style-loader（它会把CSS注入到JS或页面，不生成独立文件），改用mini-css-extract-plugin提取转译后的CSS文件，同时通过Webpack路径变量保持和/src一致的目录结构。

步骤1：安装依赖 #

npm install mini-css-extract-plugin --save-dev

步骤2：修改Webpack配置 #

1. 引入插件

在webpack.config.js顶部添加：

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

2. 替换SCSS处理规则

把原规则里的style-loader替换为MiniCssExtractPlugin.loader，修改后的module.rules：

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        MiniCssExtractPlugin.loader, // 提取CSS为独立文件
        'css-loader', // 解析CSS语法
        'sass-loader' // 将SCSS转译为CSS
      ]
    }
  ]
}

3. 配置插件输出路径

在plugins数组中添加：

plugins: [
  new MiniCssExtractPlugin({
    // 保留源文件的目录结构，输出到dist对应位置
    filename: '[path][name].css'
  })
]

最终效果 #

执行打包命令后，/dist目录会生成和/src组件结构完全匹配的CSS文件：

/dist
  /components
    component-a/component-a.css
    component-b/component-b.css

注意事项 #

• 删除之前的CopyPlugin配置，现在无需复制原SCSS文件，转译后的CSS会自动按结构输出
• 如果存在未被入口文件引用的SCSS文件，可额外配置glob-entry-webpack-plugin将这些文件纳入打包范围

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