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

Question

我正在使用 Sass(scss) 作为我项目的 css 预处理器。但是当我运行 stylelint 对于 sass 编译的 .css 文件时，它 returns 很多错误你不能直接在 .css 中修复文件，因为这些文件是由 sass 编译的。 sass 重新编译 css 文件后，您所做的任何更改都将丢失。

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

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

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

Answer 1

But when I run stylelint for the .css files compiled by sass, it returns very many errors which you cant fix directly in the .css

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

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

stylelint "**/*.scss"

stylelint also keeps flagging the various sass @-rules like @mixin and @include as unexpected and unknown at-rules.

stylelint 内置的规则面向标准 CSS。 @mixin 和 @includes at 规则是非标准的，因为它们是 SCSS 的一部分而不是 CSS，因此它们被标记为未知。但是，stylelint-scss plugin pack contains rules specific to SCSS and SCSS-like syntax. You can use it by extending the stylelint-config-recommended-scss sharable config in your .stylelintrc.json configuration file:

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

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

How can i fix the css stylelint errors caused by sass / scss?

css

sass

scss-mixins

stylelint

scss-lint