react-create-app 基于 react-app-rewired scss设置全局变量全局函数

重写react脚手架配置

customize-cra 合并配置
react-app-rewired 重写react脚手架配置

安装依赖

npm i customize-cra react-app-rewired -D

在项目根目录下创建 config-overrides.js 文件

使用 scss

安装 sass npm i sass -D

引用全局 scss 文件中的变量和函数应用全局

npm i sass-resources-loader -D

合并webpack配置 config-overrides.js

 addWebpackModuleRule({
  test: /\.scss$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: ['./src/global/var.scss', './src/global/fun.scss']
            }
        }
    ] 
}) 

重启项目 npm start

测试

在src目录下创建 global/var.scss

@mixin posTl($top, $left) {
  position: absolute;
  left: $left;
  top: $top;
}
$color: red;

在局部使用

.EffectExhibition {
  position: relative;
  ul {
    color: $color;
    @include posTl(20px, 50px);
  }
}

效果