React 中使用less预处理语言. 并且只对单个组件有效
创建项目
- 使用 react 脚手架工具快速搭建一个项目,项目名:
admin1
create-react-app admin1
- 创建完成之后 cd 到项目目录
- 安装
less
预处理语言和less-loader
编译插件
npm install less less-loader
安装完之后是不能直接使用的。
项目目录中没有config文件夹 ?
-
配置
webpack.config.js
文件,正在项目目录下的 config 目录
有些人可能是没有config目录,是因为 react 脚手架工具默认把所有的项目依赖打包起来。
打开依赖包的方法:
npm run eject
按下回车之后会提示: 是否要打开这些依赖包。 此操作是不可回退的。
输入 y 确定。
当操作到这一步的时候会报错(👀 刚才忘记了…)
报错信息大致翻译如下: 本地仓库有两个文件修改但是未做提交。
解决办法: 使用 git 指令进行一次本地仓库提交
如下图: 提交信息自己随便写
这之后再执行npm run eject
->y
回车
然后就会出现以下代码。
简译: 弹出成功! 分阶段弹出文件以进行提交。你可以在下面的网站进行文件调查,打开项目集合包的原因。
这之后就会在我们的项目目录下出现一个 config 文件夹。
在文件夹下找到webpack.config.js
打开进行修改
Ctrl
+F
全局搜索sass
,因为 react 默认支持的是 sass 预编译语言。
是从这里开始, 第二个查找到的目标
如图查找到的 sass 都修改为 less。只有如图中的需要修改,其他不需要修改
现在 less 已经可以使用了,写一个 demo 来看一看
我用一个最 ‘亮眼’ 的颜色。
// app.js
import React from 'react';
import './app.less'
function App() {
return (
<div className="App">
<h2 className="test">React 中 less 的使用</h2>
</div>
);
}
export default App;
// less
@blue: blue;
@red: red;
.test {
color: @red;
background: @blue;
}
看一下页面效果,😃 是不是特别的亮眼。
然后我再新建一个 Box 组件,同样添加一个 标签, 类名也为 test。然后在app.js 中引入并使用看一下效果
// Box
import React, { Component } from "react";
class Box extends Component {
render () {
return (
<div>
<h3 className="test">这里是 Box 组件</h3>
</div>
)
}
}
export default Box
// App.js
import React from 'react';
import './app.less'
import Box from './Box'
function App() {
return (
<div className="App">
<h2 className="test">React 中 less 的使用</h2>
<hr/>
<Box></Box>
</div>
);
}
export default App;
我们来看一下效果
Box组件里面并没有引入样式文件,但是 Box 组件中也被渲染了 css样式。
在 React 中没有像 Vue 里面一样的给 css 部分添加 scoped 作用域。
解决办法:
方法1: 这个方法可能听起来像说的是废话。
起类名的时候不冲突,BEM 命名法 (这里我就不解释BEM命名法了,看一下度娘给的答案 🙄)
方法2: 使用样式模块化。
对比一下:
- 正常引入:
import './xxx.less'
- 模块化引入:
需要修改 less 文件名为xxx.module.less
引入方法:import 自定义名字 from './xxx.module.less'
在标签上使用的方法:<div className={ 自定义名字.test }></div>
看一下小栗子:
- 先把 less 文件名修改为
- 引入的时候使用
import style from './app.module.less'
在标签上添加类名的方法
引入的 less + . + 类名
id名也是同样的使用方法
// app.js
import React from 'react';
import style from './app.module.less' // 引入方式
import Box from './Box'
function App() {
return (
<div className="App">
// 在标签上添加类名的方法
// 引入的 less + . + 类名
// id名也是同样的使用方法
<h2 className={ style.test }>React 中 less 的使用</h2>
<hr/>
<Box></Box>
</div>
);
}
export default App;
再来看一下效果