如何修復由 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": {}
}