vuejs/vue-cli

dart-sass does not support /deep/ selector

lianzhao opened this issue · 6 comments

lianzhao commented

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 sass/dart-sass#154

lianzhao commented

If there is a workaround, please update the document of vue-loader. Thanks:)

sodatea commented

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

  • 👍38
  • 🎉4
  • ❤️7
  • 🚀2
  • 👀2
Coande commented

Yes, use ::v-deep work for me. The Chinese document not update yet ...

0x1af2aec8f957 commented

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

  • 👍6
  • 👎104
  • 😕3
pujithach commented

is not working in my code, /deep/ is working,why?

mekkanix commented

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

node-sass is deprecated, FYI. Not a good idea.
https://www.npmjs.com/package/node-sass

  • 👍1