解决 Vue3 + stylelint14 + SCSS + VSCode 没效果和报错 Unknown word (CssSyntaxError)

背景

现在网上配置教程都不是 stylelint14 版本的，导致网友参考之后默认安装了最新的版本，然后出现了各种奇怪的问题。

原因

安装的 stylelint 和 VSCode Stylelint 插件版本太新，stylelint v14 及以上版本不兼容 vue3。

解决办法1（推荐）

1. 把之前的 stylelint 相关插件都卸载掉。
2. 执行 npm install --save-dev postcss-scss postcss-html stylelint-config-recommended-vue stylelint-config-standard-scss stylelint 安装包。
3. 配置刚才安装的包，可参考我下面的配置文件 stylelint.config.js，我还安装配置了 stylelint-config-recess-order 用于自动排序 CSS 如你不需要可忽略这个：

module.exports = {
    
    
  extends: [
    "stylelint-config-standard-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-recess-order"
  ]
};

4. 如果你用的是 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 及以下。