webpack配置(sa|sc)ss

webpack => 5.97.1 "webpack-cli": "5.1.4" "style-loader": "^4.0.0"
"css-loader": "^7.1.2" "sass": "^1.83.0" "sass-loader": "^16.0.4"

// 开发模式配置
{
        test: /\.(sc|sa)ss$/i,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    modules: {
                        localIdentName: '[name]__[local]--[hash:base64:5]',
                        namedExport: false,
                        exportLocalsConvention: 'camelCase'
                    },
                    esModule: false
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            'postcss-preset-env',
                            'postcss-import',
                            'autoprefixer'
                        ]
                    }
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    additionalData: `@use "@/css/variables.scss"; @use "@/css/mixins.scss";`
                }
            }
        ]
    }

模块规则配置

这是一个Webpack的module.rule配置，用于定义如何处理特定文件类型的模块。

匹配规则（test）

• 匹配模式：/\.(sc|sa)ss$/i
  • 这个正则表达式用于匹配所有以.scss或.sass结尾的文件，忽略大小写。

使用的加载器（use）

1. style-loader

• 作用：将CSS代码注入到JavaScript中，使其能够被浏览器识别并应用到页面上。
• 配置：无额外配置。

2. css-loader

• 作用：将CSS文件转换成CommonJS模块。
• 配置：
  • importLoaders：2，表示在处理CSS时，会应用后面两个loader（即postcss-loader和sass-loader）。
  • modules：
    • localIdentName：[name]__[local]--[hash:base64:5]，用于生成CSS类名，包含文件名、本地名称和哈希值。
    • namedExport：false，表示不使用命名导出。
    • exportLocalsConvention：camelCase，将CSS中的类名转换为驼峰命名法。
  • esModule：false，表示不使用ES模块。

3. postcss-loader

• 作用：使用PostCSS处理CSS文件。
• 配置：
  • postcssOptions：
    • plugins：包含了三个PostCSS插件：
      • postcss-preset-env：提供未来CSS规范的polyfill。
      • postcss-import：允许使用@import语法导入CSS文件。
      • autoprefixer：自动添加浏览器前缀。

4. sass-loader

• 作用：将SASS或SCSS文件编译成CSS。
• 配置：
  • additionalData：在编译SASS/SCSS之前，引入两个SCSS文件，分别包含全局变量和混入（mixins）。
    • @use "@/css/variables.scss";：引入全局变量。
    • @use "@/css/mixins.scss";：引入全局混入。