webpack中scss全局变量的支持

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 168 字 | 阅读时长 ≈ 1 分钟
sass-resources-loader配置全局scss

sass-resources-loader配置的全局文件会在每个scss文件中自动注入。

安装依赖

1
2
// 这个插件可以实现全局scss变量，或者说全局的scss文件
npm install sass-resources-loader --save-dev

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    test: /\.scss$/,
    use: [
        "style-loader",
        // 简洁方式
        // 'css-loader?modules&localIdentName=[local]-[hash:base64:10]',
        {
            loader: "css-loader",
            options: {
                module: true,
                localIdentName: "[local]-[hash:base64:10]"
            }
        },
        "sass-loader",
        {
            loader: "sass-resources-loader",
            options: {
                resources: path.resolve(__dirname, "../src/assets/styles-variable.scss")
            }
        }
    ]
}

sass-resources-loader的配置里resources对应的就是提供全局变量的scss文件。

最后

使用create-react-app脚手架的同学，弹出配置后，搜索下sass-loader很快就可以解决了，感谢阅读！！