React - css 模块化(modules)
什么是 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></>);
}