CSSModule 使用

注意

• Vite 原生支持 CSS Module，无需额外配置
• 文件名后缀必须是 .module.css 或 .module.less
• 例如：login.module.less、home.module.css
• 组件中通过 import styles from './login.module.less' 导入
• JSX 中使用 className={styles.login} 绑定样式

TS 声明

在types/env.d.ts 中添加以下内容：

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

declare module "*.module.css" {
  const classes: Record<string, string>;
  export default classes;
}

declare module "*.module.less" {
  const classes: Record<string, string>;
  export default classes;
}

declare module "*.module.scss" {
  const classes: Record<string, string>;
  export default classes;
}

declare module "*.module.sass" {
  const classes: Record<string, string>;
  export default classes;
}

declare module "*.module.styl" {
  const classes: Record<string, string>;
  export default classes;
}

interface ImportMetaEnv {
  /** 环境标识：development | test | production */
  readonly VITE_APP_ENV: "development" | "test" | "production";
  /** 环境名称（页面环境标识展示用） */
  readonly VITE_APP_TITLE: string;
  /** 接口地址 */
  readonly VITE_API_BASE_URL: string;
  /** 服务端口 */
  readonly VITE_PORT: string;
  /** 密钥参数（通过环境变量注入，禁止硬编码） */
  readonly VITE_APP_SECRET: string;
  /** 是否开启 Mock：true | false */
  readonly VITE_USE_MOCK: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

修改第三方组件库样式

• CSS Module 中的类名默认都会被哈希化
• 第三方组件库的类名是固定的，如 Ant Design 的 .ant-btn
• 直接写 .ant-btn { ... } 会被哈希成 .Login_ant-btn_xxx，无法命中
• :global 包裹的类名不会被哈希，保持原样输出
• 通过 :global 可以精确覆盖第三方组件的默认样式

示例

/* 覆盖 antd Button 的默认样式（:global 内的类名不会被 CSS Module 哈希化） */
:global {
  .ant-btn-primary {
    background-color: #722ed1;
    border-color: #722ed1;
    border-radius: 8px;

    &:hover {
      background-color: #9254de !important;
      border-color: #9254de !important;
    }
  }
}

局部覆盖

.loginForm {
  /* 只覆盖 .loginForm 内部的 antd Input，外层类会被哈希化，不影响全局 */
  :global(.ant-input) {
    height: 44px;
    border-radius: 6px;
  }
}