React项目中使用less总结

最新推荐文章于 2024-08-05 08:00:00 发布

静水流深之鑫

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量1.6w

点赞数 4

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_26941173/article/details/88198284

版权

本文介绍了在React项目中如何安装和使用Less，包括安装react-app-rewired、react-app-rewire-less和babel-plugin-import插件，以及Less的变量、混合、带参数混合、模式匹配和导引表达式、嵌套规则和运算等基本概念和用法。

摘要由CSDN通过智能技术生成

如何在react项目中安装less

安装react-app-rewired，react-app-rewire-less，babel-plugin-import插件

执行命令：

npm install react-app-rewired --save-dev
npm install react-app-rewire-less --save-dev
npm install babel-plugin-import --save-dev

配置package.json文件
找到scripts属性，修改start的值为react-app-rewired start，如下图:
根目录下创建config-overrides.js文件

const {
    injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
   
 config = rewireLess.withLoaderOptions({
   
modifyVars: {
    "@primary-color": "#9F35FF" },
})(config, env);
 return config;
}

less的基本使用

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS
语法上，添加了很多额外的功能，了解完安装过程，接下来看看less具体怎么使用

变量
在less中利用@符号进行变量的定义，很容易理解：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
    color: @light-blue; }

以上代码编译后输出为：

#header {
    color: #6c94be; }

less中支持变量名定义为变量，例如：

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

解析后：

content: "I am fnord.";

注意： LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:

.bordered {
   
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以:

#menu a {
   
 color: #111;
 .bordered;
}
.post a {
   
 color: red;
 .bordered;
}

.bordered class里面的属性样式都会在 #menu a 和 .post a 中体现出来:

#menu a {
   
 color: #111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
.post a {
   
 color: red;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}