前置知识
在阅读本文之前，建议具备以下知识：
- 前端开发基础知识
- Webpack 的基本用法和配置方法
- Stylable 前端 CSS 预处理器的基本用法
项目介绍
本文将介绍如何使用 @stylable/webpack-plugin，它是 Stylable 的一个 Webpack 插件，能够将 style 文件转换为对应的 CSS 文件，并将生成的 CSS 文件用于构建输出。
如何安装
可以通过 NPM 安装该插件：
npm install --save-dev @stylable/webpack-plugin
如何使用
使用该插件有两种方法：
- 在 Webpack 配置文件中添加该插件
-- -------------------- ---- -------
----- -------------- - ----------------------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
---------- ----- -- ---- --- --
--------- -
----------------------- ----- -- ----------
--------------- ----- -- ------
----------------------- ---- -- ---- --- ----
-
--
-
--- 使用命令行参数添加该插件
webpack --watch --module-bind='styl=stylable-loader' --module-bind='css=stylable-extract-plugin' --config webpack.config.js --plugin StylableWebpackPlugin
注：该方法仅适用于 Webpack 版本 4。
选项配置
该插件提供了一些选项可以进行配置：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| outputCSS | boolean | false | 是否输出 CSS 文件，生成的 CSS 文件将放置在 Webpack 输出的目录中 |
| optimize | object | {} | 优化选项，可以用于删除未使用的组件、注释以及启用 CSS 类名优化 |
| resolve | object | {} | 定义 CSS module 解析，可以用于定义 alias 等选项 |
| injectCSS | boolean | object | false | 将 stylable-runtime 代码注入 HTML，用于开发环境的 CSS 调试 |
| resolve | object | {} | 定义 CSS module 解析，可以用于定义 alias 等选项 |
| safeParser | boolean | true | 是否启用 CSS 解析器的安全模式，用于防止样式注入攻击 |
| filename | string | [id].css | 输出的 CSS 文件名，默认为 Webpack 输出的 chunk 文件名 |
| shortNamespaces | object<string, string> | {} | 定义命名空间映射，用于缩短 CSS 类名 |
示例代码
为了更好的理解 @stylable/webpack-plugin 的用法，下面将提供一些示例代码。如下面是 Webpack 配置文件的示例代码：
-- -------------------- ---- -------
----- -------------- - ----------------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------
--
------- -
------ -
-
----- ----------------
---- -
-
------- ------------------
-------- -
-- ---- ------- ----
-
--
-
------- --------------------------
-------- -
-- ---- ------- ----
-
-
-
-
-
--
-------- -
--- ----------------
---------- -----
--------- -
----------------------- ----
-
--
-
--这个配置文件将会对 .css 和 .styl 文件使用 Stylable，并将样式文件转换为 CSS 和 JS 模块。输出目录中将生成一个 [name].[hash:8].js 和 [name].[hash:8].css。
下面是在 React 项目中如何使用 @stylable/webpack-plugin：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------- - ----------------------------------------------------------
-------------- - -
----- --------------
-------- -------------------------------
------ ------------------
------- -
----- ----------------------- --------
--------- ------------
----------- ----
--
-------- -
----------- ------- ------- ------ -------- --------
--
------ ----------
------- -
------ -
- ----- ---------- ------- ----------- --
-
----- -----------------------
---- ----------------
--
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------------- -
-
-
--
--
-
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------------- -
-
--
-
------- ------------------
-------- -
------------ -----------
--------- -
----------------------- ----
-
-
-
--
--
--
--
-------- -
--- ----------------
---------- -----
--------- -
----------------------- ----
-
---
--- -------------------
--------- ---------------------
---
--
---------- -
----- -----
----- -----
-------- -----
------------ -----------
------------------- -----
------ -
------- -----------------------
-
-
--本示例中，我们使用了 @stylable/webpack-plugin 将 .styl 文件转换为 CSS 和 Stylable JS 模块，并将生成的 CSS 文件提取到单独的 chunk 中。此外，还演示了如何在 JavaScript 中 import .styl 文件并在组件中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f056c9a403f2923b035becc