如何修复由 sass / scss 引起的 css stylelint 错误？

Question

我使用 Sass(scss) 作为我项目的 css 预处理器。 但是当我为 sass 编译的.css文件运行stylelint时，它会返回很多错误，您无法直接在.css文件中修复这些错误，因为这些文件是由 sass 编译的。 sass 重新编译 css 文件后，您更改的任何内容都将丢失。

我使用了各种 sass sass-lint选项，如sass-lint和sass-lint-auto-fix但这些选项虽然有用，但并没有解决.css文件中的问题。

stylelint还不断地将各种 sass @-rules（如@mixin和@include标记为意外和未知的 at 规则。

欢迎任何建议或想法。 谢谢。

Answer 1

但是当我为 sass 编译的.css文件运行 stylelint 时，它会返回很多错误，您无法直接在.css修复这些错误

linter 支持类似 CSS 的语法，如 SCSS、Sass、Less 和 SugarSS，以及从 HTML、markdown 和 CSS-in-JS 对象和模板文字中提取嵌入样式。

你应该在你的 SCSS 源代码文件上运行 stylelint，而不是你编译的 CSS 文件：

stylelint "**/*.scss"

stylelint 还不断地将各种 sass @-rules（如 @mixin 和 @include）标记为意外和未知的 at 规则。

stylelint 中内置的规则面向标准 CSS。 @mixin和@includes at 规则是非标准的，因为它们是 SCSS 的一部分而不是 CSS，因此它们被标记为未知。 但是， stylelint-scss 插件包包含特定于 SCSS 和 SCSS 类语法的规则。 您可以通过扩展.stylelintrc.json配置文件中的stylelint-config-recommended-scss可共享配置来使用它：

{
  "extends": ["stylelint-config-recommended-scss"],
  "rules": {}
}