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

Question

I am using Sass(scss) as the css pre-processor for my project. 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 files because these files are compiled by sass. Anything you change will be lost after sass recompiles the css files.

I have used various sass linting options like sass-lint and sass-lint-auto-fix but these options, though helpful, have not fixed the problems in the .css files.

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

Any suggestions or thoughts are welcome. Thanks.

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

The linter supports CSS-like syntaxes like SCSS, Sass, Less and SugarSS, as well as extracting embedded styles from HTML, markdown and CSS-in-JS object & template literals.

You should run stylelint on your SCSS source code files, not your compiled CSS files:

stylelint "**/*.scss"

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

The rules built into stylelint are geared towards standard CSS. The @mixin and @includes at-rules are non-standard as they are part of SCSS and not CSS, so they are flagged as unknown. However, the stylelint-scss plugin pack contains rules specific to SCSS and SCSS-like syntax. You can use it by extending thestylelint-config-recommended-scss sharable config in your .stylelintrc.json configuration file :

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