react全局scss变量

 1、下载包

cnpm i sass-resources-loader -D

2、config中找到webpack.config.js

// .scss 找sassRegex
// .module.scss 找sassModuleRegex

找到如下位置:

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                mode: "icss",
            },
        },
        "sass-loader"
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,
},

替换:

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                mode: "icss",
            },
        },
        "sass-loader"
    ).concat({
        loader:'sass-resources-loader',
        options:{
            resources:['./src/assets/scss/reset.scss','./src/assets/scss/gloab.scss']
        }
    }),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,
},

3、重启项目即可

你可能感兴趣的:(react.js,scss,前端)