详解在React项目中安装并使用Less（用法总结） - CSDN文库

5星 · 超过95%的资源 164 浏览量更新于2023-05-11 收藏 87KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

详解在详解在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 {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38518668

粉丝: 4
资源: 984

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈