Question

我在vue-lic3中使用了SCSS，但是有一个奇怪的错误，使用/ 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;
}

在Vue中使用/深入/错误

2 个答案: