::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で落ちる。。。
解決方法は2つ。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