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.
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 the stylelint-config-recommended-scss sharable config in your .stylelintrc.json
configuration file:
{
"extends": ["stylelint-config-recommended-scss"],
"rules": {}
}