前言
在前端开发中，我们常常需要使用 CSS 模块化来避免 CSS 命名冲突和提高代码可读性。而在前端开发中，我们经常使用 NPM 来管理我们的依赖包。本文将介绍一个叫做 @kandebr/css-modules-loader-core 的 NPM 包，它可以帮助我们更方便地使用 CSS 模块化。
什么是 @kandebr/css-modules-loader-core
@kandebr/css-modules-loader-core 是一个基于 PostCSS 和 CSS-Loader 的 NPM 包，它可以帮助我们更方便地使用 CSS 模块化。它的优点在于：
- 可以处理 CSS 模块化，并自动生成对应的哈希类名。
- 可以在 JSX 中使用 CSS 模块化。
- 可以在 CSS 中使用变量和媒体查询，支持 PostCSS 插件。
下面就是它的主要用法。
如何使用 @kandebr/css-modules-loader-core
首先，我们需要先安装 @kandebr/css-modules-loader-core，可以使用如下的命令：
npm install @kandebr/css-modules-loader-core
接着，我们在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ---------------- - --------------------------------------------
-------------- - -
------- -
------ -
-- ----------
-- --- --------
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -
-------------- -------------------------------
--
--
--
--
--
--
-
-在这里，我们使用 css-loader 的 modules 选项，并设置 getLocalIdent 属性为 @kandebr/css-modules-loader-core 提供的 getLocalIdent 方法。这样就可以让 css-loader 自动生成哈希类名了。
接下来，我们就可以在 CSS 中使用模块化了。可以按如下的方式来定义一个模块化的类名：
-- -------------------- ---- ------- -- --- --- -- -- ------ - ---------- ----- - -- ---- --- -- -- -------------- - ---------- ----- -
在这里，我们使用了两个类名，一个是普通的类名 .title，另一个则是带有 -- 的模块化类名 .title--active。这样就可以很好地避免命名冲突了。
在 JS/TS 中，我们可以按如下的方式来使用 CSS 模块化：
import styles from './style.css'; // 这里的 styles 就是一个可以直接使用的对象，例如： console.log(styles.title); // -> "_3pBpuL-5" console.log(styles['title--active']); // -> "_2YQHfKEg"
在这里，我们使用 import 来导入 CSS 模块化，将其赋值给一个对象 styles。接着就可以直接使用这个对象来获取 CSS 类名了。
如果需要在 JSX 中使用 CSS 模块化，可以按如下的方式来使用：
import React from 'react';
import styles from './style.css';
function MyComponent() {
return (
<div className={styles.title}></div>
);
}在这里，我们按照普通的方式来使用 className，只是将它设置为了 CSS 模块化的类名而已。
结语
@kandebr/css-modules-loader-core 是一个非常不错的 NPM 包，它能够帮助我们更方便地使用 CSS 模块化。在实际的开发中，我们可以按照本文的方法来使用它，并将其集成到我们的代码中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e2444c9