在前端开发中，经常使用 CSS 预处理器或者 CSS-in-JS 等方式来管理样式文件。但是，有时候我们编写的样式文件无法与组件或其他 JavaScript 代码进行类型推断，会导致一些问题，例如我们无法在使用样式时获取正确的名称。
为了解决这一问题，我们可以使用 TypeScript 的类型系统来为 CSS 文件提供类型定义。@teamsupercell/typings-for-css-modules-loader 就是一个能够自动生成 CSS 模块类型定义的 npm 包。
安装和配置
我们可以使用 npm 来安装 @teamsupercell/typings-for-css-modules-loader:
npm install --save-dev @teamsupercell/typings-for-css-modules-loader
然后，在 webpack 的配置文件中，添加如下配置：
-- -------------------- ---- -------
------- -
------ -
-------- ------ --
-- - --------------------------------------------- -- --------- - ------ --
-- -- --- ------ ------
-
----- ---------
---- -
-
------- ------------------------------------------------
--
-- ------ --- ---------------- ---------- - ------------
-
------- -------------
-------- -
-------- -----
--
--
-
------- ---------------
--
--
--
-------- ------ --
--
-参数说明
use: 是一个数组，存放了一系列的 loader，它们的执行顺序是从后往前。因此，要将 @teamsupercell/typings-for-css-modules-loader 放在常规的 CSS loader 前面。test: 用于匹配需要应用该 loader 的文件。上面的例子将其限制为.css文件。css-loader: 常规的 CSS loader，必须要开启modules选项，使其能够生成CSS Modules类型定义。style-loader: 将解析后的 CSS 代码注入到页面中，以使样式生效。
使用示例
让我们来看一个示例，说明如何使用 @teamsupercell/typings-for-css-modules-loader。
假设有如下的一个 CSS 文件：
.bgColor {
background-color: red;
color: blue;
}在使用了 @teamsupercell/typings-for-css-modules-loader 之后，它将被转换为：
declare const styles: {
bgColor: string
};
export default styles;我们可以直接使用 styles.bgColor 来引用样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
-------- ------------- -
------ -
---- ---------------------------
------ --- ------ ---- -----------
------
--
-以上代码可以正常执行，因为 styles.bgColor 是 TypeScript 中定义了的变量名。
小结
@teamsupercell/typings-for-css-modules-loader 是一个非常有用的 npm 包，因为它可以让我们在编写组件时，可以更好地处理样式文件。有了它，我们可以获得 CSS 文件的类型推断，进而提高代码的健壮性和可维护性。同时，使用该包也相当容易，只需要简单地安装和配置即可享受到它的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb690b5cbfe1ea0611575