2020年11月

::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

2020年11月

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

Kento Matsumoto

とみまつ

CATEGORY

ARCHIVE