CODEWITHSUNDEEP
javascriptvue.jswebpacksassvue-cli-3
ZeFeng Liu
ZeFeng Liu

Reputation: 33

Use / deep / bug in Vue

I used SCSS in vue-lic3, but there was a strange bug, using / deep / will report errors, I don't want to see it.

Code Running Environment 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";`
      }
    }
  },

error

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

Upvotes: 2

Views: 5894

Answers (3)

Harsha Indunil Ranepura
Harsha Indunil Ranepura

Reputation: 1

You could use ::ng-deep

Instead of:

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

Try:

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

Upvotes: 0

Henry
Henry

Reputation: 7881

For me /deep/ wouldn't compile.

I used ::v-deep:

.scoped-element {
    color:white;

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

Or

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

Upvotes: 2

Sergey Shapirenko
Sergey Shapirenko

Reputation: 165

In my project I use next syntax .class__name { /deep/ { .class_i_want_to_change {}}} and it works fine. Did you try this?

Upvotes: 2

Related Questions