jss-css-loader 是一个 npm 包，它提供了将 JSS 模块编译为 CSS 模块的功能。通过使用 jss-css-loader，你可以将 JSS 模块用于编写样式，并且能够实现样式的热替换。
安装
jss-css-loader 可以通过 npm 进行安装，使用以下命令即可安装：
--- ------- -------------- ----------
使用
jss-css-loader 可以像普通的 css-loader 一样使用，只需要将该 loader 插入到 webpack 的配置中即可。下面是一个简单的示例：
----- --- - ----------------------
----- ------ - -------------------------------------
----- ------------ - -------------------------
-------------------
-------------- - -
---
------- -
------ -
-
----- ---------
---- -
-------- ----------------
-------- ------------------
-
-
-
-
--上面的示例中，我们首先引入了 jss、jss-preset-default 和 jss-css-loader 这三个模块。然后，我们通过 jss.setup 函数来初始化 jss，并将 preset 默认选项作为参数传递给它。
接下来，我们在 webpack 的配置中增加了一个名为 .jss 的文件扩展名的测试规则。当 webpack 碰到这个扩展名的文件时，它将按照后面的 loader 数组中的顺序依次加载对应的 loader。
对于 .jss 文件，我们将 style-loader 和 jss-css-loader 两个 loader 分别加载。这样，我们就能够将 JSS 模块编译为 CSS 模块，并将它使用 style-loader 注入到最终的 HTML 中。
深入了解
加载顺序
当使用多个 loader 进行编译时，它们的执行顺序有一个特定的顺序。webpack 将从右到左地执行每一个 loader，所以在上面的示例中，样式先被 jss-css-loader 编译为 CSS，然后被 style-loader 注入到 HTML 中。
在 React 中使用 jss-css-loader
jss-css-loader 的一个常见用法是在 React 中使用。在 React 中，我们可以通过创建一个高阶组件来实现 jss-css-loader 的样式编译和注入。以下是一个简单的例子：
------ ----- ---- --------
------ ------------------ ---- -----------
------ -------------- ---- -----------------
----- ------ - ------------------
---------- -
------ ------
----------- -------
--
---
----- ---------- - ----------- -- ------- -- -
----- --------------- - ------------------------
------ -
--------------
---------------- ---------- --
---------------
-
--
----- ----------- - -------- -- -
------ -
---- -----------------------------
------
------
-
--
----- ----------------- - ------------------------
------ ------- ------------------在上面的示例中，我们首先创建了一个名为 container 的样式对象。然后，我们创建了一个高阶组件 withStyles。该组件将组件作为参数，返回一个新的组件，该组件将样式注入到组件中。
在 MyComponent 组件中，我们使用了 container 样式，并使用 classNames 函数将样式应用到我们的 HTML 元素中。
最后，我们导出了一个以 withStyles 包装的 MyComponent。
总结
jss-css-loader 是一个非常有用的 npm 包。通过使用它，我们可以使用 JSS 模块编写样式，并实现样式的热替换。在 React 中，我们可以创建一个高阶组件来实现 jss-css-loader 的样式编译和注入。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067354890c4f72775839a7