Leverage the hidden glitch lurking within Vue

Question

Leverage the hidden glitch lurking within Vue

While working with SCSS in vue-cli3, I encountered a strange bug where using /deep/ would result in errors that I prefer not to deal with.

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 error                                                                                                                                                                           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

javascript vue.js webpack sass vue-cli-3

Answer 1

Answer №1

I've found success in my project using the following syntax:

.class__name { /deep/ { .class_i_want_to_modify {}}}

. Have you experimented with this approach?

Answer 2

I've found success in my project using the following syntax:

.class__name { /deep/ { .class_i_want_to_modify {}}}

. Have you experimented with this approach?

Answer 3

Answer №2

In my case, the /deep/ selector did not work when compiling.

Instead, I opted to use ::v-deep:

.scoped-element {
    color: white;

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

Alternatively,

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

Answer 4

In my case, the /deep/ selector did not work when compiling.

Instead, I opted to use ::v-deep:

.scoped-element {
    color: white;

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

Alternatively,

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

Answer 5

Answer №3

To achieve this effect, you can utilize the ::ng-deep selector.

Instead of utilizing the following code:

.my-custom-class /deep/ .ngx-custom-pagination .active {
  background-color: #737373;
}

Consider using this revised code snippet:

.my-custom-class ::ng-deep.ngx-custom-pagination .active {
  background-color: #737373;
}

Answer 6

To achieve this effect, you can utilize the ::ng-deep selector.

Instead of utilizing the following code:

.my-custom-class /deep/ .ngx-custom-pagination .active {
  background-color: #737373;
}

Consider using this revised code snippet:

.my-custom-class ::ng-deep.ngx-custom-pagination .active {
  background-color: #737373;
}

Leverage the hidden glitch lurking within Vue

Answer №1

Answer №2

Answer №3

Similar questions

The Facebook SDK fails to activate in Internet Explorer

Choose the div without a class

“Can you confirm if this syntax is correct for defining methods in Vue.js?”

Pass on the touchmove event from the panel to the content using jQueryMobile

Error: The function exec in matchExpr[type] is not defined

Is there an easy method for sorting through JSON data with various criteria?

The instance does not have a definition for the property or method "foo" that was referenced during rendering

Use jQuery to smoothly scroll a div

FullPage.js combines traditional scrolling with a unique horizontal slider feature

Javascript detecting key press event only firing once when a key is continuously held down

Using Codeception's selenium module to wait for JavaScript and Ajax requests to

Enzyme/Jest Testing Issue - Invariant Violation: The specified container is not a valid DOM element

What causes errors in my AJAX request based on the particular file extension?

Modify the text and purpose of the button

JS How can I generate individual buttons in a loop that trigger separate actions?

Discovering user activity through rooms within SocketIO

How can I create a computed field in TypeORM by deriving its value from other fields within the same Entity?

Tips for creating a website with an integrated, easy-to-use editing tool

The issue persists with the JavaScript window.location script constantly refreshing

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a