如何使用Webpack 5为Django动态多页应用成功打包CSS资源

解决方案 #

步骤1：修改Webpack配置中css-loader的参数 #

你当前未配置importLoaders参数，导致css-loader处理@import导入的样式文件时，不会经过后续的sass-loader处理，最终样式内容被丢弃。修改webpack.config.js中样式相关的loader配置如下：

{
  test: /\.(sa|sc|c)ss$/,              
  use: [                               
    MiniCssExtractPlugin.loader,    
    {
      loader: "css-loader",
      options: {
        // 指定处理@import的资源前，需要先经过1个前置loader（即sass-loader）
        importLoaders: 1
      }
    },                    
    "sass-loader",                   
  ],                                   
  sideEffects: true,                   
}

步骤2：在package.json中标记样式文件为有副作用 #

Webpack 5的Tree Shaking机制可能会误判未直接在JS中引用的样式文件为无副作用代码，从而将其内容删除。在package.json的根节点添加如下配置：

{
  "name": "hub-ui",
  "version": "0.0.1",
  // 新增如下配置
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.sass"
  ],
  // 其余原有配置保持不变
}

修改完成后重新执行打包命令即可生效。

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