Stylelint v14から破壊的変更が入り、Sassなどのルールはプラグイン化されました。 それに伴って、すでに導入済みの設定がある場合、いくつかの変更を加える必要があったので記録しておきます。
公式の移行ドキュメントは以下です。
https://stylelint.io/migration-guide/to-14/
結論を先に書くと、追加が必要な依存は以下です。
yarn add -D postcss postcss-scss yarn add -D stylelint-config-standard-scss yarn add -D postcss-html
で、stylelint.config.jsを以下のように修正します（元ファイルはプロジェクト次第なので、あくまで簡略版）。
module.exports = {
- extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+ extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier'],
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
},
+ overrides: [
+ {
+ files: ['**/*.vue'],
+ customSyntax: 'postcss-html',
+ },
+ ],
}
まずpostcssですが、これはSassとかLessを使う場合は基本的に必要となる模様。
SCSSを使いたいのでpostcss-scssも一緒に追加しています。
stylelint-config-standard-scss は、今回からプラグイン化されたSCSSのルールです。
インストールしたらstylelint.config.jsのextendsに追加します。
これは公式ドキュメント通り。
最後にpostcss-htmlは、<style>タグに挟まれた部分だけチェックするようにしてくれるものです。
NuxtJS (Vue.js)特有の事情として、*.vueファイル中のスタイルは<style>タグ内に書くため、これが必要になります。
*.scssファイルなどでは不要なので、stylelint.config.jsのoverridesで*.vueファイルにのみ適用されるよう設定します。
以上です！
