因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件的样式做成单独的作用域，实现样式隔离。

https://message163.github.io/react-docs/css/css-modules.html

使用很简单，因为vite开箱即用，也支持你添加的预处理器，比如sass，less，stulys等，然后文件名xxx.module.[less|scss|...]

import styles from "./index.module.scss"

export default function Blue () {
    return <div className={styles.myColor}>blue</div>
}

如果想要自定义模块类名规则

defineConfig({
  css: {
    modules:{
      localsConvention: 'dashes', // 预处理css类名
      // 生成pattern，name是文件名，local是类名，然后是hash类型和长度
      generateScopedName: '[name]__[local]__[hash:base64:5]'
    },
  },
})