Skip to content

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

Closed
@lianzhao

Description

@lianzhao

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    intend to implementThe team has the intention to implement this feature at some point. Contribution is also welcome.priority: nextupstream

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions