在前端开发中，我们经常使用 SASS 来编写优秀的样式文件。但是，由于代码量较多，而没有规范的代码风格可能会导致维护难度和协作问题。于是，sass-lint 则成为一种常见的规范工具。而为了使其更加方便，@nerds-and-company 开发了 sass-lint-webpack-plugin，表示这是一个可以适用于 webpack 环境的 SASS 格式检查工具，它能够在编译时对编写的样式文件进行检查。
安装
该插件可以通过 npm 包管理工具进行安装：
npm install --save-dev @nerds-and-company/sass-lint-webpack-plugin
配置
在 webpack 的配置文件中的 plugins 中添加 sass-lint-webpack-plugin。
-- -------------------- ---- -------
----- - --------------------- - - -------------------------------------------------------
-------------- - -
-- --- ----- --------------
-------- -
--- -----------------------
----------- ------------------- -- ---- -------
---
--
--sass-lint 配置
初始化 sass-lint 配置文件，如果没有配置文件，则需要使用命令 sass-lint -c .sass-lint.yml --generate-config 来生成默认规则。可以根据需要自定义规则。
示例代码
例如一个个人博客 sass 文件，在 rules 中配置对于简单问题的报错规则。这里使用的是 ES6 的语法。
-- -------------------- ---- -------
---------- --------
------ -
----------------- ----------
-------- -
---------- -------
------------ ----
-
-
------- -
----------- -----
------ -----
-
----- -
----------- ----
------ ---对于上述代码的配置内容：
files: include: '**/*.scss' rules: no-ids: true indentation: 2 closing_brace_empty_line_before: false space_after_comma: 1 property_sort_order: 1
总结
此时，便可以在编写 Sass 代码的时候进行实时的检查，通过该工具可以减少在协作开发中出现的错误，并大幅提高代码的可读性，有利于编写出更加规范和易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e24496f