React 使用 sass 全局变量 (避免重复导入.scss文件)

2,310 阅读1分钟

应用场景

避免重复导入全局定义的 SASS 变量文件

1、安装 sass-resouces-loader

  yarn add sass-resources-loader -D

官方解释: 这个加载器将  @import 您的SASS资源放入每个required SASS模块中。因此,您可以在所有SASS样式中使用共享变量和mixin,而无需在每个文件中手动导入它们。使用CSS模块!

2、React 配置

  • 暴露配置文件

    yarn run eject
    
  • config 文件夹中找到 webpack.config.js,然后在找到如下代码

    {
        test: sassModuleRegex,
        use: getStyleLoaders(
            {
                importLoaders: 3,
                sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                },
            },
            'sass-loader'
        )
    },
    
  • getStyleLoaders 函数后面添加如下代码

    concat({
             // 这行的意思是引入加载器 sass-resources-loader
            loader: 'sass-resources-loader',
            options: {
                    // 这里是写全局 sass 文件路径
                  resources: [path.resolve(__dirname,'./../src/assets/css/index.scss')]
           }
    })
    
  • 最终代码

    {
       test: sassModuleRegex,
       use: getStyleLoaders(
           {
               importLoaders: 3,
               sourceMap: isEnvProduction
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
               modules: {
                   getLocalIdent: getCSSModuleLocalIdent,
               },
           },
           'sass-loader'
       ).concat({
           // 这行的意思是引入加载器 sass-resources-loader
           loader: 'sass-resources-loader',
           options: {
               // 这里是写全局 sass 文件路径
               resources: [path.resolve(__dirname, './../src/assets/css/index.scss')]
           }
       }),
    }
    
  • 重启项目