在前端开发中，我们经常需要使用诸如 Sass、Less 和 Stylus 等 CSS 预处理器来提高样式开发效率。而在使用 rollup 进行构建时，我们可以通过 rollup-plugin-stylus-js-modules 包来将 Stylus 源代码进行打包，并生成对应的 JS 模块，方便后续的引用。本文将介绍如何使用这个 npm 包。
安装 rollup-plugin-stylus-js-modules
首先，我们需要将 rollup-plugin-stylus-js-modules 包安装到我们的项目中：
npm install --save-dev rollup-plugin-stylus-js-modules
使用 rollup-plugin-stylus-js-modules
下面是一个简单的 rollup 配置示例，展示了如何使用 rollup-plugin-stylus-js-modules：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ ------ ---- ----------------------------------
--------
------ ---------------
-------- -
--------
-- --------- ------ -------
-------- ------------
-- ------- --- ----
------- ---------
--
-
-------------- -- -
--------------
----- -----------------
------- -----
---
---在上面的示例中，我们指定了入口模块为 src/index.js，并在 plugins 中使用了 rollup-plugin-stylus-js-modules 插件。这个插件有两个配置项：
include：必填项，包含输入的 Stylus 文件路径的对象。可以使用通配符。prefix：可选项，生成的 CSS 类名前缀。默认值为'styles-'。
示例代码
以下是一个带有 Stylus 样式的示例组件，并演示了如何在组件中引用生成的 CSS JS 模块：
-- -------------------- ---- -------
---- ------------------------- ---
----------
------- ---------------
-------------
---------
-----------
--------
------ ------ ---- ----------------
------ ------- -
----- ---------
--------- -
------------- -
------ ----------------------
-
-
--
---------
------ -------
------- -
------ -----
----------------- --------
------- -----
-------------- ----
---------- -----
-------- --- -----
------- --------
------- -
----------------- --------
-
-------- -
----------------- --------
-
-
--------在上面的示例中，我们首先引入了使用 rollup-plugin-stylus-js-modules 打包后生成的 Button.styl.js 模块。然后，在组件的计算属性中，我们可以直接使用 styles['button'] 来引用生成的样式名。
最后，我们使用了 style 标签，并指定 module 属性来允许使用 CSS modules。在样式中，我们可以看到我们使用了一个 :hover 伪类和一个 :active 伪类来实现按钮样式的变化。
小结
本文介绍了如何使用 rollup-plugin-stylus-js-modules 包来打包 Stylus 样式，并生成对应的 JS 模块。同时，我们还演示了如何在组件中引用生成的 CSS JS 模块，以及如何使用 style 标签和 module 属性来开启 CSS modules 功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4181e8991b448ebc70