详解在详解在React项目中安装并使用项目中安装并使用Less（用法总结）（用法总结）
主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学
习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 {
