一、基本使用

作用：

  • 解决冲突
  • 显示依赖
  • 无默认作用域

没有css modules的情况下，样式是全局的（当类名相同时，样式相互干扰）：

1
2
3
// 全局引入方式，所有文件的样式相互影响
import './style.less';
className="element"

添加 css modules 后，各个组件仅仅会引用自己import的样式，下面开始介绍如何配置css modules：

  1. 下载相关依赖
1
npm i css-loader -D
  1. css-loader 配置
1
2
3
4
5
6
7
8
{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[local]_[hash:base64:5]'
    }
  }
}
  1. 使用
1
2
3
// css modules 依赖
import style from './style.less';
class=`${style.element}`

基本效果（类名生成相应的hash）

二、styleName 方式使用

发现每次引入都需要使用import style from 'xxx'; className={style.title}这样。总是需要多写一个我们不太需要的style，下面介绍另一种方式：

  1. 引入相关依赖
1
2
3
4
5
6
7
8
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依赖）

  1. css loader配置 webpack
1
2
3
4
5
6
7
8
9
{
    loader: 'css-loader',
    options: {
        modules: {
            // 将样式文件中类名转化为指定格式
            localIdentName: '[local]-[hash:5]',
        }
    }
},
  1. babelrc中配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"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来生成一致的名字)

  1. 组件中引入样式文件方式
1
2
3
// css modules styleName
import 'style.less';
styleName="element"

基本使用：

  • :local
  • :global
  • :export 将css变量输出到js
  • 组合实现复用
1
2
3
4
5
.base { /* 所有通用的样式 */ }
.normal {
composes: base;
/* normal 其它样式 */
}

三、antd 样式冲突方案

  1. 配置文件，修改less文件中类名的前缀
1
2
3
4
5
6
7
8
9
10
11
12
13
// less-loader配置
{
loader: 'less-loader',
options: {
  lessOptions:{
    javascriptEnabled: true,
    modifyVars: {
    // 修改less文件中类名的前缀
      '@ant-prefix': 'mis-cpts__ant',
      '@primary-color': '#C92E33'
    },
  }
}
  1. 修改html中类名的前缀
1
2
3
<ConfigProvider locale={zhCN} prefixCls="mis-cpts__ant">
...
</ConfigProvider>