解决 Vue3 + stylelint14 + SCSS + VSCode 没效果和报错 Unknown word (CssSyntaxError)
原因安装的插件 stylelint、stylelint-config-standard、stylelint-scss 版本太新,对于 vue3 文件的支持不好。解决办法npm install --save-dev postcss-html stylelint-config-recommended-vue 和 npm install --save-dev stylelint-config-stand
·
背景
现在网上配置教程都不是 stylelint14
版本的,导致网友参考之后默认安装了最新的版本,然后出现了各种奇怪的问题。
原因
安装的 stylelint
和 VSCode Stylelint
插件版本太新,stylelint v14
及以上版本不兼容 vue3
。
解决办法1(推荐)
- 把之前的
stylelint
相关插件都卸载掉。 - 执行
npm install --save-dev postcss-scss postcss-html stylelint-config-recommended-vue stylelint-config-standard-scss stylelint
安装包。 - 配置刚才安装的包,可参考我下面的配置文件
stylelint.config.js
,我还安装配置了stylelint-config-recess-order
用于自动排序CSS
如你不需要可忽略这个:
module.exports = {
extends: [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss",
"stylelint-config-recess-order"
]
};
- 如果你用的是
VSCode
编辑器则需要在配置文件setting.json
加上
// stylelint 需要检查的文件
"stylelint.validate": [
"css",
"less",
"postcss",
"scss",
"vue",
"sass"
],
参考来自官方说明 https://github.com/ota-meshi/stylelint-config-recommended-vue,https://github.com/stylelint/stylelint/blob/14.0.0/docs/migration-guide/to-14.md#syntax-option-and-automatic-inferral-of-syntax
解决办法2
将 VSCode Stylelint
插件降级,并且将 stylelint
版本降级到 v13
及以下。
更多推荐
已为社区贡献1条内容
所有评论(0)