在前端开发中，CSS 是不可或缺的一部分。但是 CSS 模块化开发的过程中，我们经常会遇到各种问题，例如命名冲突、重复代码等。使用 typed-css-modules-loader 可以很好地解决这些问题，使得 CSS 模块化开发更加方便和可靠。
typed-css-modules-loader 是什么？
typed-css-modules-loader 是一个 Webpack 加载器，旨在为 CSS 模块化开发提供良好的支持。它会为给定的 CSS 文件生成对应的 .d.ts（TypeScript 定义文件），方便在 TypeScript 中使用导入的 CSS 模块。
如何使用 typed-css-modules-loader？
首先，我们需要安装 typed-css-modules-loader 和相应的依赖：
npm install typed-css-modules-loader css-loader style-loader --save-dev
接着，在 Webpack 配置文件中添加以下配置：
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } },
'typed-css-modules-loader'
]
}以上这段代码的作用是：首先使用 style-loader 将 CSS 代码插入到 HTML 文件中，接着使用 css-loader 开启 CSS 模块化，并启用 typed-css-modules-loader 来生成对应的 .d.ts 文件。
接下来，我们可以在 TypeScript 中使用导入的 CSS 模块了。例如：
import * as styles from './styles.css'; console.log(styles.myClass);
这里的 styles 是我们从 styles.css 中导入的模块，myClass 则是 CSS 类名。由于我们启用了 typed-css-modules-loader，TypeScript 现在可以提示 myClass 是有效的 CSS 类名，并避免了命名冲突和拼写错误的问题。
示例代码
下面是一个使用 typed-css-modules-loader 的实例。我们将建立一个简单的文本输入框，在用户输入时，打印输入文字的颜色和背景颜色。
首先，我们需要创建 CSS 文件（例如 styles.css）：
-- -------------------- ---- ------- ----------- - ------- ----- ----------------- ----- -------- ----- - ----------------- - -------- ----- ----------------- ----- ------ ----- -
接着，我们创建一个 TypeScript 文件（例如 index.ts）：
-- -------------------- ---- ------- ------ - -- ------ ---- --------------- ----- ----- - -------------------------------- ---------- - ------- -------------------------------------- ------------------------------- -- -- - ------------------- -------------------------------- ------------------------------ ------------------------------------------ --- ---------------------------------
以上代码中，我们从 styles.css 中导入了 .textInput 类，将其添加到输入框的 class 列表中。接着，我们为输入框添加一个 input 事件监听器，在用户输入时打印颜色和背景颜色。注意我们可以使用类型提示获取 .textInputFocusColor 和 .textInputFocusBackgroundColor 的值。
最后，在 HTML 中引入 bundle.js 即可：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ --- ------- ------ ------------
-------
------
------- ---------------------------
-------
-------总结
typed-css-modules-loader 使得 CSS 模块化开发更加方便和可靠。使用它可以避免 CSS 命名冲突、重复代码等问题，并为 TypeScript 提供类型提示。在实践中，我们可以尝试用它改进我们的项目中的 CSS 模块化开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69358