Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dart-sass does not support /deep/ selector

See original GitHub issue

Version

3.4.0

Reproduction link

https://github.com/lianzhao/vuecli-3.4

Environment info

Environment Info:

  System:
    OS: macOS Sierra 10.12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: Not Found
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 10.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.4.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.4.0
    @vue/cli-plugin-babel: ^3.4.0 => 3.4.0
    @vue/cli-plugin-pwa: ^3.4.0 => 3.4.0
    @vue/cli-plugin-typescript: ^3.4.0 => 3.4.0
    @vue/cli-service: ^3.4.0 => 3.4.0
    @vue/cli-shared-utils:  3.4.0
    @vue/component-compiler-utils:  2.5.2
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    draggable-vue-directive: ^2.0.5 => 2.0.5
    typescript: ^3.2.2 => 3.2.2
    vue: ^2.5.22 => 2.5.22
    vue-class-component: ^6.0.0 => 6.3.2
    vue-cli-plugin-element: ^1.0.1 => 1.0.1
    vue-countup-v2: ^2.0.0 => 2.0.0
    vue-flat-surface-shader: ^1.0.5 => 1.0.5
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.6.2
    vue-property-decorator: ^7.3.0 => 7.3.0
    vue-router: ^3.0.2 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.22 => 2.5.22
    vue-template-es2015-compiler:  1.8.2
    vuex: ^3.0.1 => 3.0.1
  npmGlobalPackages:
    @vue/cli: 3.4.0

Steps to reproduce

<style lang="scss" scoped>
/deep/ h1 {
  color: red;
}
</style>

What is expected?

Can use /deep/ selector in sass/scss as when node-sass was used.

What is actually happening?

build failed

If I use >>> instead of /deep/, npm run serve can run successfully, but the style was not correct Please refert to https://github.com/sass/dart-sass/issues/154

Issue Analytics

State:
Created 5 years ago
Reactions:10
Comments:6 (1 by maintainers)

Top GitHub Comments

100reactions

0x1af2aec8f957commented, May 23, 2019

npm uninstall sass --save npm install node-sass --save --dev

53reactions

sodateacommented, Feb 22, 2019

::v-deep implemented in @vue/component-compiler-utils v2.6.0, should work after you reinstall the deps.

Top Results From Across the Web

The `/deep/` selector is not working using sass-loader in my ...

In my case I found /deep/ issues in Angular 7 project. This post guide me that I have Dart-sass install on my global...

Node Sass to Dart Sass | vue-element-admin

One thing to note after replacing node-sass is that it no longer supports the /deep/ writing style of sass before, and it needs...

Node-Sass or Dart-Sass : The CSS Preprocessor Dilemma

More than a year ago, I answered a question on StackOverflow about choosing between Node or Dart-Sass for Vue CLI. It got lots...

Style Rules - Sass

Sass only parses selectors after interpolation is resolved. This means you can safely use interpolation to generate any part of the selector without...

sass - npm

Dart Sass doesn't support the precision option. Dart Sass defaults to a sufficiently high precision for all existing browsers, ...