什么是 stylelint-custom-processor-loader-with-warnings?
stylelint-custom-processor-loader-with-warnings 是一个用于在 webpack 构建过程中集成 stylelint 进行 CSS 代码规范检查的 npm 包。和 stylelint-loader 相比，它能够更加灵活的处理非标准语法和自定义选择器，并且支持在控制台输出警告信息，让开发者更加易于发现并修复。
安装
使用 npm 进行安装：
--- ------- ----------------------------------------------- ----------
配置
在 webpack 的 module.rules 中配置 stylelint-custom-processor-loader-with-warnings：
-------------- - -
-- ------- ---
------- -
------ --
----- --------------
---- --
------- ---------------
-------- -
--------- -----
-
-- -
------- ------------
-- -
------- ----------------
-- -
------- -------------
-- -
------- --------------------------------------------------
-------- -
------------ ----- -- ------
---------- ------------------ -- -- ---------------- -----
-
--
--
--
-- -----
-- ---
--配置项
stylelint-custom-processor-loader-with-warnings 中支持如下配置项：
emitWarning：是否输出警告信息，默认为false；formatter：指定格式化函数，用于输出检查结果，默认使用 stylelint 自带格式化函数；configPath：指定 stylelint 配置文件路径，默认为undefined；configBasedir：指定 stylelint 配置文件所在目录，默认为相对于 webpack 配置文件路径；syntax：指定 CSS 语法类型，可以是css、less或scss，默认为scss；plugins：指定 stylelint 插件数组，需要使用 npm 安装后才能使用；customSyntax：使用自定义 CSS 语法解析器。
示例代码
-- --------- --------------- -------- ----------- ----- ----- - ------ --------------- ---------- ----------- -
-- -----------------
-------------- - -
------ -----------------
------- -
------ --
----- ----------
---- --
------- --------------
-- -
------- ------------
-- -
------- ----------------
-- -
------- -------------
-- -
------- --------------------------------------------------
-------- -
------------ -----
---------- ------------------
-
--
--
-
--在控制台输入 npm run dev 后，可以看到类似下面的输出信息：
----- ----- ---- -- ------- -- ----------------- -------------------- -
--- - -------- --------- ----------- ----- ----------------------
--------------- --------
--------这表明变量 $primary-color 的颜色值不符合规范，并输出了警告信息。通过这种方式，我们可以在开发过程中及时修复规范错误，提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005662d81e8991b448e20a4