升级Vuetify至2.6.12后执行npm run serve报Sass语法错误

报错信息 #

Error:
Syntax Error: SassError: expected selector.
╷
2 │ /deep/ #btn-acoes-t button:nth-child(3){ display: none !important;}
│ ^
╵
src\views\PerfilAnoLetivo.vue 2:1 root stylesheet

@ ./node_modules/vue-style-loader??ref–8-oneOf-1-0!./node_modules/css-loader??ref–8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref–8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true& 4:14-467 15:3-20:5 16:22-475
@ ./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true&
@ ./src/views/PerfilAnoLetivo.vue
@ ./src/routes/gerencial.js
@ ./src/routes/layout.js
@ ./src/routes/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

项目package.json配置 #

{
  "name": "educacaoapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lint-fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "axios": "^1.1.3",
    "babel-polyfill": "^6.26.0",
    "chart.js": "^2.7.3",
    "eslint-config-standard": "^12.0.0",
    "material-design-icons-iconfont": "^6.7.0",
    "moment": "^2.29.4",
    "pdfmake": "^0.2.6",
    "vue": "^2.6.6",
    "vue-chartjs": "^3.4.0",
    "vue-debounce": "^4.0.0",
    "vue-gravatar": "^1.4.1",
    "vue-progressbar": "^0.7.5",
    "vue-router": "^3.0.2",
    "vue-the-mask": "^0.11.1",
    "vue-tour": "^2.0.0",
    "vuelidate": "^0.7.7",
    "vuetify": "^2.6.12",
    "vuex": "^3.1.0",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.19.4",
    "@mdi/font": "^7.0.96",
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-standard": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.13.0",
    "eslint-plugin-vue": "^5.2.1",
    "vue-template-compiler": "^2.7.13",
    "sass": "^1.56.0",
    "sass-loader": "^10.1.1"
  }
}

环境信息 #

• node版本：v14.20.1
• npm版本：6.14.17

已尝试的无效操作 #

• 删除node_modules并重新执行npm install
• 移除node-sass包
• 重新安装sass-loader

解决方案 #

报错核心原因是你当前使用的dart-sass（package.json中sass依赖）不再支持/deep/这种旧版深度选择器语法，Vue 2配合新版sass-loader需要改用官方推荐的::v-deep替代：

将报错代码行：

/deep/ #btn-acoes-t button:nth-child(3){ display: none !important;}

修改为：

::v-deep #btn-acoes-t button:nth-child(3) {
  display: none !important;
}

补充说明：

1. 你的项目已经切换到dart-sass，它完全不兼容/deep/和>>>这两种旧写法，必须使用::v-deep
2. ::v-deep是Vue官方为scoped样式提供的跨组件深度选择器，适配Vuetify 2.x和新版sass-loader的组合环境

内容的提问来源于stack exchange，提问作者Elton Rodrigues Homem