在前端开发中，使用 CSS modules 可以帮助我们更好地封装样式，提高样式的可复用性和可维护性。而使用 TypeScript 来编写前端代码也有助于提高代码的健壮性和可读性。那么如何在 TypeScript 中使用 CSS modules 呢？这时候，npm 包 @pandell/typescript-plugin-css-modules 就变得非常有用了。
安装
首先，我们需要安装该 npm 包：
npm install --save-dev @pandell/typescript-plugin-css-modules
此外，我们需要一个 CSS loader，比如 css-loader：
npm install --save-dev css-loader
配置
接下来，我们需要修改 TypeScript 的配置，让其支持使用 @pandell/typescript-plugin-css-modules。我们需要在 tsconfig.json 中增加如下配置：
-- -------------------- ---- -------
-
------------------ -
---------- -
-
------- -----------------------------------------
---------- -
--------------------- -
---------- -
----------------- -------------------------
-
-
-
-
-
-
-这里的 "modules": { "localIdentName": "[local]_[hash:base64:5]" } 指定了 CSS modules 的配置，其中 localIdentName 指定了生成的类名的格式。
需要注意的是，由于使用了 @pandell/typescript-plugin-css-modules，我们需要将 CSS 文件的后缀名修改为 .module.css，以便 TypeScript 编译器能够正确地识别该文件为使用了 CSS modules 的文件。
使用
在 TypeScript 文件中，我们可以使用和导入 CSS 文件一样的方式导入 CSS modules 文件，比如：
import styles from "./styles.module.css"; console.log(styles.className); // 输出生成的类名
在上面的例子中，styles 变量包含了导入的 CSS 文件中所定义的所有类名和类名对应的值。
示例代码
以下是一个完整的例子，演示了如何在 TypeScript 中使用 CSS modules：
import styles from "./styles.module.css";
document.body.innerHTML = `<div class="${styles.container}">
<div class="${styles.header}">Hello CSS Modules!</div>
<div class="${styles.content}">This is a demo of using CSS Modules in TypeScript.</div>
</div>`;同时，我们需要一个 CSS 文件来定义样式：
-- -------------------- ---- ------- ---------- - ------- ----- -------- ----- -------------- ---- ----------------- ----- - ------- - ---------- ----- ------------ ----- ----------- ------- - -------- - ----------- ----- ---------- ----- ----------- -------- -
由于我们使用了 @pandell/typescript-plugin-css-modules，该 CSS 文件的后缀名应该是 .module.css。
意义
使用 @pandell/typescript-plugin-css-modules，可以将我们的样式和 TypeScript 代码更好地结合起来，提高代码的可读性和可维护性。同时，使用了 CSS modules，可以帮助我们更好地封装样式，避免样式污染和类名冲突的问题。这对于复杂的项目来说尤为重要。
总结
在本文中，我们介绍了如何使用 npm 包 @pandell/typescript-plugin-css-modules 来在 TypeScript 中使用 CSS modules，并给出了详细的配置和示例代码。使用 @pandell/typescript-plugin-css-modules，可以让我们更好地利用 TypeScript 的静态类型检查和自动补全等特性，并将我们的代码更好地组织和封装。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f95