Vue.js项目Sass编译报错：SassError: expected '{' 求助

问题描述 #

运行Vue项目时，App.vue文件的SCSS样式编译出现语法错误，报错为SassError: expected "{"，错误指向src\App.vue第4行第221位。尝试移除样式后重新添加，问题仍未解决。

报错日志 #

Compiled with problems:X

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
╷
4 │ var content = require("!!../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss");
│ ^
╵
src\App.vue 4:221 root stylesheet.

App.vue代码 #

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

<style lang='scss'>
/* write SCSS here */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

解决方案 #

• 检查版本兼容性：sass-loader版本需与Vue版本匹配。Vue 2建议使用sass-loader@^10，Vue 3可使用更高版本（如sass-loader@13+）。版本不匹配时，卸载现有sass-loader后安装对应版本：

  npm uninstall sass-loader
  npm install sass-loader@合适版本 --save-dev
  

• 清理缓存并重装依赖：删除node_modules、package-lock.json（或yarn.lock），执行缓存清理命令后重新安装依赖，再重启项目：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  npm run serve
  

• 检查vue.config.js配置：若自定义了CSS loader配置，避免重复配置sass-loader导致冲突。示例正确配置如下（Vue 3）：

  module.exports = {
    css: {
      loaderOptions: {
        sass: {
          // 若需全局导入SCSS变量可添加此配置，无需则可省略
          additionalData: `@import "@/styles/variables.scss";`
        }
      }
    }
  }
  

• 排查文件特殊字符：将App.vue代码复制到纯文本编辑器（如Notepad++），清除不可见特殊字符后重新粘贴回原文件。
• 确认style标签属性：确保<style lang='scss'>使用英文引号，无中文标点符号干扰。

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