react工程中,less的使用是有必要的
less:具有比css更强大和更加人性化的设计,但在打包过程中都是讲less转化成css
1.允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了;
2.混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
3.我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
4.运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。
在react工程中less的配置可参照第一条博客内容,如无效,则可以采用下面的方法来解决问题
第一步:npm i -D slash2
第二部:如图,在craco.config.js文件中定义slash,与label平级的plugins如下配置
第三部: npm start
const slash = require('slash2');
plugins: [
{
plugin: CracoLessPlugin,
options: {
cssLoaderOptions: {
modules: {
getLocalIdent: (context, localIdentName, localName