什么是 css modules？

因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件的样式做成单独的作用域，实现样式隔离，而css modules就是一种解决方案，但是我们需要借助一些工具来实现，比如webpack，postcss，css-loader，vite等。

如何在Vite中使用css modules

css modules，可以配合各种css预处理去使用，例如less，sass，stylus等。

安装css预处理

npm install less -D // 安装less 任选其一
npm install sass -D // 安装sass 任选其一
npm install stylus -D // 安装stylus 任选其一

在Vite中css Modules 是开箱即用的，只需要把文件名设置为xxx.module.[css|less|sass|stylus]，就可以使用css modules了。

案例

src/components/Async/index.module.scss

.async {
  color: red;
}

 使用

src/components/Async/index.tsx

import style from './index.module.scss'
const AsyncComponent =()=> {
  return (
    <div className={style.async}>
      Async
    </div>
  )
}

export default AsyncComponent

编译结果

可以看到async类名被编译成了_async_8ofwx_1，这就是css modules的实现原理，通过在类名前添加一个唯一的哈希值，来实现样式隔离。

修改css modules 规则 

在vite.config.ts中配置css modules的规则

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
   css: {
    modules: {
      localsConvention: 'dashes', // 修改css modules的类名规则 可以改成驼峰命名 或者 -命名等
      generateScopedName: '[name]__[local]___[hash:base64:5]', // 修改css modules的类名规则
    },
  },
})

localsConvention配置

 localsConvention: 'camelCaseOnly', // camelCaseOnly 只会把非驼峰的命名转为驼峰，并删除之前的类名
 localsConvention: 'camelCase',  //camelCase 会把非驼峰的命名转为驼峰，并保留之前的类名
 localsConvention: 'dashesOnly', // dashesOnly 会将所有的-类名转化为驼峰，并且原始的类名会被删除
 localsConvention: 'dashes', // dashes 会将所有的-类名转化为驼峰，会保留原始的类名

 如果想同时支持驼峰命名和-连接的命名

localsConvention:[camelCase|dashes] //可以设置为localsConvention:[camelCase|dashes]，这样就可以同时支持驼峰命名和-连接的命名。

 generateScopedName配置

  generateScopedName: '[local]_[hash:base64:5]' // 只保留类名和哈希值

  generateScopedName: '[hash:base64:8]' // 只使用哈希值

  generateScopedName: '[name]_[local]' // 只使用文件名和类名，没有哈希

  generateScopedName: '[local]--[hash:base64:4]' // 自定义分隔符

<button class="button_pmkzx_6">类名 + 哈希值</button>
<button class="pmkzx_6">哈希值</button>
<button class="index-module_button">文件名 + 类名</button>
<button class="button--pmkzx_6">类名 + 分隔符 + 哈希值</button>

维持类名  

意思就是说在样式文件中的某些样式，不希望被编译成css modules，可以设置为global，例如：

.app{
    background: red;
    width: 200px;
    height: 200px;
    :global(.button){
        color：red;
    }
}

//在使用的时候，就可以直接使用原始的类名 button
import styles from './index.module.scss';
const App: React.FC = () => {
  return (
    <>
      <div className={styles.app}>
        <button className='button'>按钮</button>
      </div>
    </>
  );
}