rollup-plugin-vue icon indicating copy to clipboard operation
rollup-plugin-vue copied to clipboard
verified publisher icon vuejs

`/deep/` selector is broken in SCSS

Open arantes555 opened this issue 6 years ago • 2 comments

Version

5.0.0

Reproduction link

https://github.com/arantes555/rollup-plugin-vue-deep-bug

Steps to reproduce

  • npm install
  • npm run build

What is expected?

Template compiles

What is actually happening?

Build error

If you roll-back to [email protected], the template compiles correctly.

arantes555 avatar May 13 '19 09:05 arantes555

It's the exact point of increasing the major version to 5 (to introduce this breaking change). Dart Sass (npm package sass) deprecated /deep/ so after switching from node-sass to sass we have to drop /deep/ and you can use ::v-deep instead.

Maybe we should add more visibility for this in the release notes & docs. /cc @znck

Justineo avatar May 13 '19 09:05 Justineo

Thanks for your answer. I just thought that the major version bump was to deal with all the minor inconsistencies that might exist between sass and node-sass, not the /deep/ selector specifically. As there was nothing in the changelogs & docs about this, and it's still referenced in the vue-loader doc (with which rollup-plugin-vue's doc says it maintains parity), I created the issue.

Yes, if it's not possible to fix it, then it should at least be documented in the changelog & docs

arantes555 avatar May 13 '19 09:05 arantes555