安装react-app-rewired、react-app-rewire-less babel-plugin-import插件
执行命令:
npm安装react-app-rewired——save-dev
npm安装react-app-rewire-less——save-dev
npm安装babel-plugin-import——save-dev
配置包。json文件找到脚本属性,修改开始的值为react-app-rewired开始,如下图:<人物>
,
根目录下创建config-overrides.js文件
const {injectBabelPlugin}=要求(“react-app-rewired”);
const rewireLess=要求(“react-app-rewire-less”);
模块。出口=函数覆盖(配置、env) {
配置=rewireLess.withLoaderOptions ({
modifyVars: {“@primary-color”:“# 9 f35ff "},
})(配置、env);
返回配置;
}
少做为CSS的一种形式的扩展,它并没有阉割CSS的功能,而是在现有的CSS语法上,添加了很多额外的功能,了解完安装过程,接下来看看少具体怎么使用
<强>变量
在减少中利用@符号进行变量的定义,很容易理解:复制代码
@nice-blue: # 5 b83ad;
@light-blue: @nice-blue + # 111;
#标题{颜色:@light-blue;}
以上代码编译后输出为:
#标题{颜色:# 6 c94be;}
中少支持变量名定义为变量,例如:
@fnord:“我fnord。”;
@var:“fnord”;
内容:@@var;
解析后:
内容:“我fnord。”;
注意:中更少的变量为完全的“常”量,所以只能定义一次
<强>混合
中少在我们可以定义一些通用的属性集为一个类,然后在另一个类中去调用这些属性。下面有这样一个类:
.bordered {
border-top:黑色虚线1 px;
边界底部:固体2 px黑色;
}
那如果我们现在需要在其他类中引入那些通用的属性集,那么我们只需要在任何类中像下面这样调用就可以:
#菜单{
颜色:# 111;
.bordered;
}
. post一个{
颜色:红色;
.bordered;
}
。与班级里面的属性样式都会在#菜单和. post一个中体现出来:
#菜单{
颜色:# 111;
border-top:黑色虚线1 px;
边界底部:固体2 px黑色;
}
. post一个{
颜色:红色;
border-top:黑色虚线1 px;
边界底部:固体2 px黑色;
}
任何CSS类,id或者元素属性集都可以以同样的方式引入。
<>强带参数混合
在中越少,你还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) {
border - radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他类中像这样调用它:
#标题{
.border-radius (4 px);
}
.button {
.border-radius (6 px);
}
我们还可以像这样给参数设置默认值:
.border-radius (@radius: 5 px) {
border - radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以现在如果我们像这样调用它的话:
#标题{
.border-radius;
}
半径的值就会是5 px。你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:
.wrap () {
文本绕排:包装;
空白:pre-wrap;
空白:-moz-pre-wrap;
自动换行:break-word;
}
前{.wrap}
输出:
{前
文本绕排:包装;
空白:pre-wrap;
空白:-moz-pre-wrap;
自动换行:break-word;
}
<强> @arguments变量
@arguments包含了所有传递进来的参数。如果你不想单独处理每一个参数的话就可以像这样写:
