一、基本使用
作用:
- 解决冲突
- 显示依赖
- 无默认作用域
没有css modules
的情况下,样式是全局的(当类名相同时,样式相互干扰):
// 全局引入方式,所有文件的样式相互影响
import './style.less';
className="element"
添加 css modules
后,各个组件仅仅会引用自己import的样式,下面开始介绍如何配置css modules
:
- 下载相关依赖
npm i css-loader -D
css-loader
配置
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
}
- 使用
// css modules 依赖
import style from './style.less';
class=`${style.element}`
基本效果(类名生成相应的hash)
二、styleName 方式使用
发现每次引入都需要使用import style from 'xxx';
className={style.title}
这样。总是需要多写一个我们不太需要的style,下面介绍另一种方式:
- 引入相关依赖
npm i css-loader -D
# less相关的依赖
npm install less-loader less -D
# 使用编译时CSS模块解析将styleName转换为className
npm i babel-plugin-react-css-modules --save
npm install postcss-less --save-dev
babel-plugin-react-css-modules
实现编译时CSS模块解析将styleName转换为className。与react-css-modules
相比,babel-plugin-react-css-modules
具有更小的性能开销(0-10%vs+50%)和更小的大小占用空间(小于2kb vs 17kb react-css-modules+lodash依赖)
css loader
配置 webpack
{
loader: 'css-loader',
options: {
modules: {
// 将样式文件中类名转化为指定格式
localIdentName: '[local]-[hash:5]',
}
}
},
- babelrc中配置
"plugins": [
[
"react-css-modules",
{
// 如果styleName只在其中一个中,则允许多个匿名导入
"autoResolveMultipleImports": true,
// 将react dom中类名转化为指定格式
"generateScopedName": "[local]-[contenthash:5]",
"filetypes": {
".less": {
"syntax": "postcss-less"
}
}
}
]
]
localIdentName
和generateScopedName
配置的名字要保持一致。(这里有个坑,从css-loader6.2.0使用了新的hash算法,所以导致两者的生成的hash不一致,可以利用generic-names来生成一致的名字)
- 组件中引入样式文件方式
// css modules styleName
import 'style.less';
styleName="element"
基本使用:
- :local
- :global
- :export 将css变量输出到js
- 组合实现复用
.base { /* 所有通用的样式 */ }
.normal {
composes: base;
/* normal 其它样式 */
}
三、antd 样式冲突方案
- 配置文件,修改less文件中类名的前缀
// less-loader配置
{
loader: 'less-loader',
options: {
lessOptions:{
javascriptEnabled: true,
modifyVars: {
// 修改less文件中类名的前缀
'@ant-prefix': 'mis-cpts__ant',
'@primary-color': '#C92E33'
},
}
}
- 修改html中类名的前缀
<ConfigProvider locale={zhCN} prefixCls="mis-cpts__ant">
...
</ConfigProvider>