vue.js - Vue项目样式编译失败，SassError: expected selector 不知道哪里出了问题？

Question

 error  in ./src/views/modules/users/add-or-update.vue?vue&type=style&index=0&id=4af10b4e&lang=scss

Syntax Error: SassError: expected selector.
  ╷
5 │     & /deep/ .ql-container {
  │       ^
  ╵
  C:\Users\ningmeng999\Desktop\9-14OnlineTutoringClassSystem-main2\OnlineTutoringClassSystem-main2\front\src\views\modules\users\add-or-update.vue 5:7  root stylesheet


 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./n
ode_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_module
s/vue-loader/lib??vue-loader-options!./src/views/modules/users/add-or-update.vue?vue&type=style&index=0&id=4af10b4e&lang=scss 4:14-491 15:3-20:5 16:22-499
 @ ./src/views/modules/users/add-or-update.vue?vue&type=style&index=0&id=4af10b4e&lang=scss
 @ ./src/views/modules/users/add-or-update.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vu
e-loader-options!./src/views/modules/users/list.vue?vue&type=script&lang=js
 @ ./src/views/modules/users/list.vue?vue&type=script&lang=js
 @ ./src/views/modules/users/list.vue
 @ ./src/router/router-static.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.120.69.57:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/views/modules/yonghu/add-or-update.vue?vue&type=style&index=0&id=d336c394&lang=scss

Syntax Error: SassError: expected selector.
  ╷
5 │     & /deep/ .ql-container {
  │       ^
  ╵
  C:\Users\ningmeng999\Desktop\9-14OnlineTutoringClassSystem-main2\OnlineTutoringClassSystem-main2\front\src\views\modules\yonghu\add-or-update.vue 5:7  root stylesheet

Vue打包报错，在idea终端运行npm run serve全是样式报错

进行很多次删除安装node_module文件，npm和node的版本也是匹配的，但是就是报错，已经卡这好多天了，不知道哪里出了问题

Answer 1

找到对应的业务组件把 /deep/ 修改为 ::v-deep

为什么不使用 /deep 呢，因为现在的 Sass 默认安装的是 dart-sass 如果你使用 /deep/ 会提示错误： SassError: expected selector. /deep/

Vue 中的样式穿透 v-deep、/deep/ 和 >>>

Answer 2

在 Vue 项目中使用 Sass 时，遇到 SassError: expected selector 错误通常是因为 Sass 语法错误。在你的具体情况下，错误发生在尝试使用 & /deep/ 选择器时。

在 Sass 中，& 符号通常用于引用父选择器，但在 CSS 预处理器中（如 Sass），/deep/ 或 >>>（在 Sass 中通常使用 ::v-deep）是 Vue 特有的深度选择器，用于穿透组件的样式封装。然而，& /deep/ 这种写法在 Sass 中是不被识别的，因为它混合了 Sass 的父选择器引用和 Vue 的深度选择器语法。

解决方案

你应该使用 Vue 推荐的深度选择器语法 ::v-deep（如果你使用的是 Vue 3 的 <style scoped>），而不是 /deep/。在 Sass 中，你应该这样写：

<style scoped lang="scss">
::v-deep .ql-container {
  /* 你的样式 */
}
</style>

或者，如果你正在使用 Vue 2 和 scoped 样式，并且需要兼容旧版本的浏览器或构建系统，你可能需要使用 /deep/ 或 >>>，但你应该确保它们是在 CSS 字符串中直接使用，而不是在 Sass 的 & 后面：

<style scoped lang="scss">
/deep/ .ql-container {
  /* 你的样式 */
}
</style>

或者

<style scoped lang="scss">
>>> .ql-container {
  /* 你的样式 */
}
</style>

但请注意，/deep/ 和 >>> 并不是 Sass 的一部分，它们是 Vue 编译器在构建时处理的特殊语法。因此，它们应该直接放在 <style> 标签内的 CSS 字符串中。

清理和重建

在修改代码后，确保清理你的 node_modules 文件夹和可能的缓存（如 npm cache clean --force），然后重新安装依赖（npm install）并重新启动你的开发服务器（npm run serve）。

这些步骤应该能帮助你解决编译错误。如果问题仍然存在，请检查其他可能的配置错误或代码问题。