Vue.js项目中SCSS报'At-rule or selector expected'错误的解决办法

开发Vue.js项目时使用SCSS编写样式，App.vue代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <p>weqt</p>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>

<style lang="scss">
$color: red; // 此处显示错误
body {
  background-color: $color;
  p {
    color: white;
  }
}
</style>

编辑器报错：'At-rule or selector expectedcss(css-ruleorselectorexpected)'，但SCSS样式能正常作用于页面，且团队其他成员无此问题。

这是因为编辑器的CSS语法检查工具没有正确识别<style>标签的lang="scss"属性，把SCSS代码当作普通CSS解析。普通CSS不支持$开头的变量定义，因此触发语法错误提示。常见诱因包括：

• 编辑器的CSS语言服务优先级高于SCSS解析服务
• Vue相关扩展（如Vetur/Volar）的SCSS支持未正确启用
• 项目Stylelint配置未适配SCSS语法规则

• 检查Vue扩展配置（以VS Code为例）
  • 确保安装了Vue Language Features (Volar)或Vetur并启用。若用Volar，确认设置中volar.style.enable为true；若用Vetur，检查vetur.validation.style是否开启，且vetur.style.preprocessors.scss配置正确。
  • 禁用内置CSS语法检查干扰：打开设置搜索css.validate，将其设为false，避免编辑器用普通CSS规则校验SCSS代码。
• 适配Stylelint配置
  • 在项目根目录的.stylelintrc（或.stylelintrc.js）中，继承SCSS专用规则集，比如：

    {
      "extends": ["stylelint-config-standard-scss"]
    }
    

  • 确保禁用针对普通CSS的冲突规则，比如给at-rule-no-unknown添加SCSS白名单，避免变量定义被误判。
• 确认文件关联设置
  • 打开VS Code设置，搜索files.associations，添加或确认：

    "*.vue": "vue"
    

  确保编辑器将.vue文件按Vue组件类型解析，而非普通HTML/CSS。
• 重启编辑器或重置扩展
  • 若上述配置调整后仍无效，重启编辑器清除扩展缓存；或重置Vetur/Volar的配置为默认值，再重新设置SCSS相关选项。

内容的提问来源于stack exchange，提问作者nara lee