Typed CSS Modules 插件#

Typed CSS Modules 插件用于为项目中的 CSS Modules 文件生成类型声明文件。

快速开始#

安装插件#

你可以通过如下的命令安装插件:

npm add @rsbuild/plugin-typed-css-modules -D

注册插件#

你可以在 rsbuild.config.ts 文件中注册插件：

import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';

export default {
  plugins: [pluginTypedCSSModules()],
};

示例#

通过添加 Typed CSS Modules 插件，Rsbuild 会为项目中所有的 CSS Modules 文件生成类型声明文件。

例如，创建 src/index.ts 和 src/index.module.css 两个文件：

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

console.log(styles.pageHeader);

.page-header {
  color: black;
}

构建后，Rsbuild 会自动生成 src/index.module.css.d.ts 类型声明文件：

interface CssExports {
  'page-header': string;
  pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;

此时再打开 src/index.ts 文件，可以看到 styles 对象已经具备了准确的类型。

具名导出#

在开启 output.cssModules.namedExport 的情况下，生成的类型声明文件仅会包含具名导出。

比如：

.page {
  color: black;
}
.header {
  color: white;
}

生成的类型：

export const page: string;
export const header: string;

配置 Git#

在上述例子中，src/index.module.css.d.ts 是编译生成的代码，你可以选择将它们提交到 Git 仓库里，也可以选择在 .gitignore 文件中忽略它们：

# Ignore auto generated CSS declarations
*.module.css.d.ts
*.module.sass.d.ts
*.module.scss.d.ts
*.module.less.d.ts
*.module.styl.d.ts
*.module.stylus.d.ts

此外，如果生成的代码导致了 ESLint 报错，你也可以将上述配置添加到 .eslintignore 文件里。