Rollup-plugin-vue: `/deep/` selector is broken in SCSS

Created on 13 May 2019  路  2Comments  路  Source: vuejs/rollup-plugin-vue

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.

High Available Maintenance help wanted

Most helpful comment

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

All 2 comments

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

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

Was this page helpful?
0 / 5 - 0 ratings