重写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);
}
}
效果