跳到主要内容

Css Modules

2023年12月18日
柏拉文
越努力，越幸运

一、认识​

CSS Modules 在 Vite 也是一个开箱即用的能力，Vite 会对后缀带有.module的样式文件自动应用 CSS Modules。

二、配置​

CSS Modules 在 Vite 也是一个开箱即用的能力，Vite 会对后缀带有.module的样式文件自动应用 CSS Modules。可以在配置文件中的css.modules选项来配置 CSS Modules 的功能

2.1 自定义格式​

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


export default defineConfig({
  css: {
    modules: {
      generateScopedName: "[name]__[local]___[hash:base64:5]"
    }
  },
  plugins: [react()],
});

再次访问页面，我们可以发现刚才的类名已经变成了我们自定义的形式:

class="App-module__redColor___bUqfn"