noguzo blog

stylelintで@extendがエラーになってしまう

2019.12.07


Unexpected unknown at-rule "@extend"   at-rule-no-unknown

CSSの構文をもとに解釈しているため、@extendがエラーとなってしまう。 そのため、stylelint-scssが提供しているscss/at-rule-no-unknownを使う。 stylelint-scss/README.md at master · kristerkari/stylelint-scss · GitHub

設定を修正

設定は簡単で、 デフォルトのat-rule-no-unknownにnullを設定し、 新たにscss/at-rule-no-unknownをtrueで適用するようにする。

  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }

もし、stylelint-scssがない場合は以下のようにインストールし、

yarn add --dev stylelint-scss

.stylelintrcのpluginsに追加しておきます。

{
  ...,
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
}

これで@extendへのエラーがでなくなります。

参考

[SCSS] Unexpected unknown at-rule “@extend” · Issue #3190 · stylelint/stylelint · GitHub


Frontend engineer.