问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
Jovi
    51
    头像头饰
    陟上晴明
      21.2k124691
      新手上路，请多包涵
       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的版本也是匹配的，但是就是报错，已经卡这好多天了，不知道哪里出了问题

      vue.jssass
      阅读 2k
      avatarAI BotBETA

      在 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）。

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

      1 个回答
      得票最新
      头像头饰
      陟上晴明
        21.2k124691
        ✓ 已被采纳

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

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

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏