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
javascriptvue.jswebpacksassvue-cli-3

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

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 №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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS to format the output of a script embedded within

When I embed the following script in my HTML, the output doesn't have any styling. How can I style the script output to blend well with the existing HTML structure? I tried accessing the output by ID, but couldn't figure it out. <script> ...

javascripthtmlcss

Importing Vue Components

Despite numerous attempts, I am still unable to figure out how to efficiently import all Vue single file components from a directory at once. Allow me to elaborate... For instance, I have a directory named Add/Items where I have stored various Vue compone ...

vue.jsvue-component

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

Type of Angular Service Issue: string or null

I'm encountering a persistent issue with my Angular code, specifically while calling services in my application built on Angular 13. The problem arises when trying to access the user API from the backend, leading to recurrent errors. Despite extensive ...

javascriptjsonangularapirest

What is the best way to retrieve SQL results within the parent function's scope in NodeJS?

Currently, I am developing a Brackets text editor extension that stores work time in a database and allows users to view their time entries. The backend is built using Node.js to interact with an SQL server. So far, I have been successful in entering time ...

javascriptnode.jsadobe-brackets

Converting an rrule date value from an array to a customized string format

Here is an array that I am working with: [{ evening_feeding: false evening_feeding_time: "19:00" feeding_frequency_rule: **"FREQ=DAILY;INTERVAL=2"** id: 890 morning_feeding: true morning_feeding_time: "04:00 ...

javascriptangularjs

Building a straightforward RESTful API for user authentication with Node.js, MongoDB, and Express.js

Can someone provide guidance on creating a RESTful API using Node.js, Express.js, and MongoDB? Specifically, I am looking for assistance with writing the schema for login and sign up pages, as well as comparing data in MongoDB using Node.js Express.js. As ...

javascriptnode.jsmongodbrestexpress

Load Materialize autocomplete with data from a JSON file

After hours of research, I am struggling to populate my autocomplete input using the Materialize plugin for a website project. Since I am not well-versed in json or ajax, implementing the original example from the documentation with static data has been qu ...

javascriptphpjsonajaxmaterialize

What is the method for utilizing Jquery to target the width value of an inline property?

I am struggling with selecting the "style=:width: 10%" value using jquery for a progress bar element in bootstrap. <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10% ...

javascriptjquerytwitter-bootstrap

Send a JSON string directly to Google Cloud Storage without the need for a file upload

When I need to receive data in the form of a JSON string from an external source and then upload it directly to Google Cloud Storage without saving it as a local file first, is there a way to accomplish this task? Thank you. storage .bucket(bucketName) ...

javascriptjsonnode.jsgoogle-cloud-storagestorage

The error message encountered is: "TypeError: webpack.DefinePlugin is not a constructor

While attempting to integrate a plugin into my webpack.config.js file, I encountered the following error message: [webpack-cli] Failed to load '/Users/slatifi/git/hcah/webpack.config.js' config [webpack-cli] TypeError: webpack.DefinePlugin is not ...

node.jswebpackrsuite

Why does jQuery val() function fail to clear readonly input date in Firefox but succeed in Chrome?

When using JQuery.val(''), I noticed a difference in behavior between Firefox and Chrome. You can see the issue demonstrated in this jsfiddle: https://jsfiddle.net/mdqfbj/d4eovkg8/3/ A JS function triggered by a radio button is supposed to clea ...

javascriptjquerygoogle-chromefirefoxreadonly-attribute

"Learn the efficient way to monitor both a ref variable and a reactive object using just one watcher in Vue

Documentation for Vue v3 includes an example of watching multiple refs with a single watcher by passing an array as an argument. You can find it here. I'm curious if and how I can apply a similar approach to watch both a ref and a reactive object sim ...

vue.jswatchvuejs3

Having difficulty utilizing the $.each() function to assign properties to an object

I have an object called habits that contains some values. var habits={ "Drinking":"No", "Smoking":"No" } I want to add the values from this variable into another variable in the following format: var NewHabits = new Object(); Ne ...

javascriptjquery

Dropdown for state selection within WooCommerce for specific countries

I am encountering a challenge in configuring a form with default WooCommerce country and states selection dropdowns. Essentially, my goal is to present the Country selection first, followed by the State selection based on the chosen country. For instance, ...

javascriptphpjquerywordpresswoocommerce

The module located at "c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx" does not have a default export available

I am currently delving into the realm of RxJs. Even after installing rxjs in package.json, why am I still encountering an error that says [ts] Module '"c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx"' has no default export ...

javascriptjqueryangulartypescriptrxjs

retrieving request headers using XMLHttpRequest

Is there a way for me to access my requestHeaders within the onload function? Any guidance on how to achieve this would be greatly appreciated. Many thanks! ...

javascriptajaxxmlhttprequest

The radio button element could not be located using the attribute "checked="Checked""

While working with Geb, I encountered an issue using the code div.find("input","checked":contains("checked")). This is the snippet of code I attempted to use in order to locate the checked radio button on a webpage. However, I received an error when using ...

javascripthtmlcssseleniumgeb

Is it possible to create a personalized serialize form when sending an AJAX POST request

How can I format form data on an AJAX POST request differently than the default $("#formid").serialze()? The current result is not suitable for my needs, as it looks like this: `poststring="csrfmiddlewaretoken=bb9SOkN756QSgTbdJYDTvIz7KYtAdZ4A&colname= ...

javascriptajaxjsondjangopost

Leveraging Next.js to efficiently handle multiple asynchronous requests with NextResponse

I have developed a login/signup application using NextJS. When attempting to log in, the logic in my route.ts file sends requests to a MongoDB database to check if the user exists and if the password is correct. However, instead of receiving the expected 4 ...

javascriptmongodbnext.js