在react中实现CSS模块化

时间:2023-12-26 11:46:19

  react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。

webpack的配置: 截取一小段

 {
test: /\.css/,use:['style-loader','css-loader?modules$localIdentName=[path][name]-[local]-[hash]']
}

在react中实现CSS模块化

如上所示:

这里讲解一下localIdentName自定义生成的类名格式,可选参数有:

  • [path]表示样式表相对于项目根目录所在的路径
  • [name] 表示样式表文件名称
  • [local] 表示样式表的类名定义名称
  • [hash:length] 表示32位的hash值

注意:只有类名选择器和ID选择器才会被模块化控制,类似body  h2 span 这些标签选择器是不会被模块化控制

使用过程如下:

import cname from '@xxx.css'  => .title{color:red;}
//这里你可以输出测试一下cname的值 console.log(cname)
//react中的部分代码
render(){
  return(
  <div>
    <h2 className={cname.title}>这里是标题<h2>
  </div>
)
}

一句HTml多类名配置如下:

//test 为全局样式 通过加空格实现
<h1 className={[cname.title, 'test'].join(' ')}></h1>

当然这里还有一种情况就是在模块化的样式表中,你不希望某个类或者ID被模块化,想让他成为全局样式,可以通过:global配置: .test是你不希望被模块化的类

//被:global包裹起来的类名,不会被模块化,而是会全局生效
:global(.test){
color:blue;
}