在react中对less实现scoped配置
react中less的css modules配置介绍配置使用可能的问题介绍我们知道CSS是网页样式的一种描述方法。习惯了使用Vue项目中样式文件强大的scoped属性限制,差点忘记了CSS的规则是全局的,任何一个组件的样式规则都会对整个页面有效。最近在开始一个React的项目,就需要项目中的样式内容也能像Vue中的样式那样,只对某个文件或者某个DOM有效,避免全局样式文件的污染。那么问题来了,..
介绍
我们知道CSS
是网页样式的一种描述方法。习惯了使用Vue
项目中样式文件强大的scoped
属性限制,差点忘记了CSS
的规则是全局的,任何一个组件的样式规则都会对整个页面有效。最近在开始一个React
的项目,就需要项目中的样式内容也能像Vue
中的样式那样,只对某个文件或者某个DOM
有效,避免全局样式文件的污染。那么问题来了,在create-react-app
创建的React
项目中,如何使用Webpack
配置css modules
呢?
使用
-
配置
webpack.config.js
,详情参考ant.d主题换肤。
其中const lessRegex = /\.less$/ const lessModuleRegex = /\.module\.less$/;
-
引入
在需要使用的文件中引入
index.module.less
文件,注意,这里的样式文件后缀必须是module.less
,因为我们在webpack.config.js
中配置的正则检测就是/\.module\.less$/
-
样式内容
// index.module.less .testModule{ background: blue; width: 20px; height: 14px; }
-
className
使用// index.js import lessModule from './index.module.less' <div className={lessModule.testModule}></div>
-
查看控制台的样式文件
结果中可以看到class
已经被解析成了乱七八糟,这种,解决了全局污染的问题了吧。
可能的问题
如果你出现了引入.less
文件,但是打印出来发现是空的
import lessModules from 'index.module.less'
console.log(lessModules) // {}
那就要去看看你的webpack.config.js
文件,这里是否添加了exclude
项
这句配置项,是需要把我们想要css modules
处理的样式文件不经过普通的.less
文件解析,而使用下面的css module
来解析。
更多推荐
所有评论(0)