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等。

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/Button/index.module.scss

.button {
  color: red;
}

• src/components/Button/index.tsx

//使用方法，直接引入即可
import styles from './index.module.scss';

export default function Button() {
  return <button className={styles.button}>按钮</button>;
}

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

<button class="button_pmkzx_6">按钮</button>

修改css modules 规则

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

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

例子 例如设置为(localsConvention:camelCaseOnly)驼峰命名

camelCase 和 camelCaseOnly 区别在于，camelCase 会把非驼峰的命名转为驼峰，并保留之前的类名，而 camelCaseOnly 只会把非驼峰的命名转为驼峰，并删除之前的类名。

• src/components/Button/index.module.scss

.button-red {
  color: red;
}

• src/components/Button/index.tsx

设置为驼峰之后，使用的时候需要使用驼峰命名，例如buttonRed，而不是button-red。

import styles from './index.module.scss';

export default function Button() {
  return <button className={styles.buttonRed}>按钮</button>;
}

例子 例如设置为(localsConvention:dashesOnly)会将所有-的类名转化为驼峰，并且原始的类名会被删除

dashes 和 dashesOnly 区别在于，dashes 会保留原始的类名，而 dashesOnly 会删除原始的类名。

• src/components/Button/index.module.scss

.button-red {
  color: red;
}

• src/components/Button/index.tsx

设置为原始命名之后，使用的时候需要使用驼峰命名，例如buttonRed，而不是button-red。

import styles from './index.module.scss';

export default function Button() {
  return <button className={styles.buttonRed}>按钮</button>;
}

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

例子 修改css modules的类名规则

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

export default defineConfig({
  css: {
    modules: {
        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){
        background: blue;
        width: 100px;
        height: 100px;
    }
}

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