Vue中的使用/深度/bug

Question

我在vue-lic3中使用了SCSS，但是有一个奇怪的bug，使用/deep/会报错，我不想看到。

代码运行环境 vue-cli3 + vant + scss

css

/deep/ .van-tabs__content.van-tabs__content--animated,
  .van-tabs--line,
  .van-pull-refresh,
  .van-pull-refresh__track {
    height: 100%;
  }

vue.config.js

css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/style/module.scss";`
      }
    }
  },

错误

Failed to compile with 1 errors                                                                                                                                                                           14:14:46
 error  in ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  .van-tabs--line,
 ^
      Expected selector.
    ╷
274 │   /deep/ .van-tabs__content.van-tabs__content--animated,
    │   ^
    ╵
  stdin 274:3  root stylesheet
      in F:\web\project-a\src\views\RankingList.vue (line 274, column 3)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??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/lib/loader.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/RankingList.vue?vue&type=style&index=0&lang=scss& 4:14-444 14:3-18:5 15:22-452
 @ ./src/views/RankingList.vue?vue&type=style&index=0&lang=scss&
 @ ./src/views/RankingList.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.100.15:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Answer 1

在我的项目中，我使用了下一个语法 .class__name { /deep/ { .class_i_want_to_change {}}}，它工作正常。你试过了吗？

Answer 2

对我来说 /deep/ 无法编译。

我用了::v-deep:

.scoped-element {
    color:white;

    ::v-deep .child-of-scoped-element {
        color: black;
    }
}

或者

.scoped-element::v-deep.child-of-scoped-element {
    color: black;
}

Answer 3

你可以使用 ::ng-deep

而不是：

.my-pagination /deep/ .ngx-pagination .current {
  background: #737373;
}

尝试：

.my-pagination ::ng-deep.ngx-pagination .current {
  background: #737373;
}

Vue中的使用/深度/bug

Use / deep / bug in Vue

javascript

sass

webpack

vue.js

vue-cli-3