在 create-react-app 创建的项目中使用 less 模块化
程序员文章站
2022-07-03 11:28:26
...
在create-react-app 脚手架创建的项目中,突然想到要用 less 的模块化,但是 create-react-app 创建的项目只是自带 css 模块化。要使用 less 模块化,需要自行配置
首先,创建项目
create-react-app test
然后,把 react 脚手架的配置弹射出来,并 npm run i 安装项目依赖
npm run eject
找到项目下 config/webpack.config.js,在 file-loader 之前加入这部分代码
// less 开启模块化
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
exclude: /node_modules/,
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
},
{
loader: 'less-loader'
}
]
},
运行项目 npm run start,创建一个组件,并引用 less 样式文件
import React, { Component } from 'react'
import styles from './index.less'
class Home extends Component {
state = { }
render() {
return (
<div>
<p className={ styles.red }>Red</p>
<p className={ styles.green }>Green</p>
</div>
);
}
}
export default Home;
.red {color: red}
.green {color: green; font-size: 20px;}
在浏览器审查元素,可以看到红框中,类名后面增加了唯一的的字符串,类似 vue 里面的样式类名。css 模块化最好的办法就是 class 类名的唯一性
推荐阅读
-
在Python的Django框架中创建和使用模版
-
在IDEA中创建跑得起来的Springboot项目
-
在CorelDRAW中创建颜色样式和使用色彩样式的方法介绍
-
css媒体查询aspect-ratio宽高比在less中的使用
-
在Python的Django框架中创建和使用模版
-
在eclipse中使用Maven分模块搭建SSM框架,创建jar、war、pom工程模块教学,项目的热部署,需要的可以留下邮箱,给大家发整理过的Maven笔记
-
在Ruby中创建和使用哈希的教程
-
在ASP.NET Core中创建内部使用Scoped服务的Quartz.NET宿主服务
-
css媒体查询aspect-ratio宽高比在less中的使用
-
使用Maven在Eclipse中创建Web项目