Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dart-sass does not support /deep/ selector #3399

Closed
lianzhao opened this issue Feb 1, 2019 · 4 comments

Comments

Projects
None yet
4 participants
@lianzhao
Copy link

commented Feb 1, 2019

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

This comment has been minimized.

Copy link
Author

commented Feb 1, 2019

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

@sodatea

This comment has been minimized.

Copy link
Member

commented Feb 22, 2019

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

@Coande

This comment has been minimized.

Copy link

commented Mar 11, 2019

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

@noteScript

This comment has been minimized.

Copy link

commented May 23, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.