Vue.js/Nuxt.jsで`Unexpected unknown pseudo-element selector “::v-deep” selector-pseudo-element-no-unknown`が出たときの対処法

プログラミング

::v-deep は使いたくないんだけど、諦めてv-deepを使ってしまった時にUnexpected unknown pseudo-element selector "::v-deep" selector-pseudo-element-no-unknown のエラーが出てしまった。

原因は、stylelintの設定でselector-pseudo-element-no-unknownがデフォルトtrueになっており、v-deepの擬似要素が許可されていないので、擬似要素のv-deepがstylelintで落ちる。。。

解決方法は２つ。selector-pseudo-element-no-unknown をnullにするか、v-deepを許可するか。

  • selector-pseudo-element-no-unknown をnullにする方法
## stylelint.config.js
module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {
    'selector-pseudo-element-no-unknown': null,
  },
}
  • v-deepを許可する方法
## stylelint.config.js
module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  rules: {
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
  },
}

stylelint.config.js を修正することで、問題を解決できる
参考：https://stylelint.io/user-guide/rules/selector-pseudo-element-no-unknown