在 Vite 中配置 CSS 模块

// 定义样式类名（可以用驼峰/短横线命名）
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  color: #1890ff;
  font-size: 24px;
  font-weight: 600;
}

// 全局样式（:global 包裹，不会被模块化）
:global(.global-btn) {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

import React from 'react';
// 导入 CSS 模块（默认导出一个对象，包含所有类名）
import styles from './App.module.scss';

function App() {
  return (
    <div className={styles.container}>
      {/* 使用模块化类名（自动转换为唯一名称） */}
      <h1 className={styles.title}>Vite + React CSS 模块</h1>
      {/* 使用全局样式（直接写类名） */}
      <button className="global-btn">全局按钮</button>
    </div>
  );
}

export default App;

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

export default defineConfig({
  plugins: [react()],
  css: {
    // CSS 模块核心配置
    modules: {
      // 1. 自定义类名生成规则（常用）
      // 格式：[name]（文件名）、[local]（原类名）、[hash]（哈希值）
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      
      // 2. 指定哪些文件启用 CSS 模块（默认是 .module.*）
      // 比如让所有 .scss 文件都启用模块化（无需加 .module 后缀）
      // regexp: /\.scss$/i,
      
      // 3. 关闭 CSS 模块的警告（比如未使用的类名警告）
      warnOnInvalidSymbols: false,
      
      // 4. 自定义 localsConvention（类名转换规则）
      localsConvention: 'camelCaseOnly', // 仅支持驼峰命名（如 appTitle）
      // 可选值：
      // - 'asIs'：不转换（原类名）
      // - 'camelCase'：兼容驼峰和短横线（app-title → appTitle）
      // - 'camelCaseOnly'：仅驼峰
      // - 'dashes'：短横线（默认）
      
      // 5. 生成 CSS 模块类型声明文件（TypeScript 项目推荐）
      generateDeclarations: true,
      
      // 6. 忽略某些文件的模块化（优先级高于 regexp）
      // ignore: /global\.scss$/i // 全局样式文件不启用模块化
    },
    // 开发环境生成 SourceMap，方便调试样式
    devSourcemap: true
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

/// <reference types="vite/client" />

// 为 CSS 模块添加类型声明
declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.less' {
  const classes: { readonly [key: string]: string };
  export default classes;
}