在前端开发中，CSS 的使用非常频繁，而且 CSS 文件越来越大，模块化的思想也越来越普及，如何优雅地管理和使用 CSS 成为一个不可避免的话题。而在这个问题上，friendly-typed-css-modules 这个 npm 包给我们提供了一种非常好的解决方案。
friendly-typed-css-modules 简介
friendly-typed-css-modules 是一个 npm 包，它能够将 CSS 转化为 TypeScript 类型的定义文件，从而为我们的 CSS 提供代码提示和类型检查的支持。
安装和使用
使用 friendly-typed-css-modules 非常简单，只需要以下几个步骤：
1. 安装 npm 包
npm install -D friendly-typed-css-modules
2. 在 webpack 配置文件中添加插件
friendly-typed-css-modules 提供了一个 webpack 插件，我们需要在 webpack 配置文件中添加该插件。
-- -------------------- ---- -------
----- ------------------------------------ - -----------------------------------------------------
-------------- - -
---
-------- -
--- ---------------------------------------
---
-
---
-3. 使用 CSS
使用 CSS 有两种方式，一种是采用 import 语法引入 CSS，例如：
-- -------------------- ---- -------
------ ------ ---- --------------
-------- ----- -
------ -
---- -----------------------------
---
------
--
-另一种是采用 require() 语法引入 CSS，例如：
-- -------------------- ---- -------
----- ------ - -----------------------
-------- ----- -
------ -
---- -----------------------------
---
------
--
-4. 使用 TypeScript
使用 TypeScript 时，我们需要在 TypeScript 中声明 CSS 的类型。例如：
declare module '*.css' {
const classes: { [key: string]: string };
export default classes;
}这样就可以在 TypeScript 中使用 CSS 了。例如：
-- -------------------- ---- -------
------ ------ ---- --------------
--------- ----- -
----------- -------
-
-------- ----- --------- -- ------ -
------ -
---- ------------------------------- ---------------
---
------
--
-5. Typescript 文件生成
当我们运行 webpack 构建后，friendly-typed-css-modules 会自动生成一个 global.d.ts 文件，其中包含了我们所有 CSS 文件的类型定义。需要注意的是，这个文件应该被 TypeScript 自动引入，如果没有被自动引入，我们可以手动在 tsconfig.json 文件中添加以下配置：
-- -------------------- ---- -------
-
------------------ -
---
------------ -
----------------------
---------------
--
-
-其中 "src/generated" 是我们生成 TypeScript 文件的目录。
示例代码
以下是一个使用 friendly-typed-css-modules 的示例：
-- -------------------- ---- -------
------ ------ ---- --------------
--------- ----- -
----------- -------
-
-------- ----- --------- -- ------ -
------ -
---- ------------------------------- ---------------
---
------
--
-总结
friendly-typed-css-modules 是一个非常好用的 npm 包，它为我们的 CSS 文件提供了类型检查和代码提示的支持，从而提高了开发效率，减少了错误。现在就去尝试一下吧，相信你会爱上它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e781e8991b448d78db