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.scss 两个文件：

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

export default () => {
  <div>
    <div className={styles.pageHeader}>Page Header</div>
  </div>;
};

// index.module.scss
.page-header {
  color: black;
}

执行构建命令后，会自动生成 src/index.module.scss.d.ts 类型声明文件：

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'page-header': string;
  pageHeader: string;
}
export const cssExports: CssExports;
export default cssExports;

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