laravel-mix: Laravel-Mix 4.0.2 breaks /deep/ in Vue component styling

Laravel Mix Version: 4.0.2 (npm list --depth=0)
Node Version (node -v): 11.3
NPM Version (npm -v): 6.5
OS: MacOS Mojave

Description:

I have a Vue component where I need scoped styling to affect a child component. I use /deep/ for this. This has always worked pre Laravel-Mix 4.

<style lang="scss" scoped>
    /deep/ .some-styling {
    }

With Laravel-Mix 4, I get the following error on npm run dev:

         }
     ^
      Expected selector.
    & /deep/ .some-foo-styling{
      ^

    .some-other-styling {
^
      Expected selector.
/deep/.some-styling{
^

It seems clear that Mix no longer understands what /deep/ is, so I tried replacing it with the thing that it’s an alias for: >>>

Mix now compiles without error, but sadly the generated CSS is wrong. It should be:

[data-v-507877ae] .some-styling {
}

but instead it generates:

 > .some-styling[data-v-507877ae] {
}

which means that the class must now be a direct descendant, so my styling breaks.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 17

Most upvoted comments

Yes, /deep/ and >>> used to be part of SCSS/SASS, so they’re valid when parsed using node-sass for now. The Vue loader then gives them special meaning when you use them inside a scoped component. If node-sass removes /deep/ and >>> in the future and it’s no longer valid SCSS in node-sass too, then I guess Vue has to invent something else. The problem is that the style is parsed before the Vue loader processes it, so whatever they invent should be added to node-sass and dart-sass too.

This issue has been reported to Vue a while ago, but they’re not taking any action. If everyone’s code breaks some day they’ll probably act fast though. That’s how it usually works 😉

ThomHurks on Jan 5, 2019

Ah yep, that’s the issue. If calling mix.sass(), it always specifies sass as a required dependency, even if you’ve manually pulled in node-sass. So once the Vue component has to determine which Sass implementation to use, it sees that sass is installed, and assumes that’s the one you want. Fixing now.

JeffreyWay on Dec 12, 2018

Hmm, I tried again with Laravel Mix 4.0.4 to only have node-sass installed as a dev dependency, and using

mix.sass('resources/sass/app.scss', 'public/css', {
    implementation: require('node-sass')
});

and then running npm run dev and it does automatically install sass as a dependency. Laravel-Mix as of version 4 should only install sass if it uses it, right? So either it does use it somewhere, or maybe it installs it by mistake.

ThomHurks on Dec 12, 2018

Using node-saas only withouth saas on the dependencies solved this for me

NaturalDevCR on Feb 24, 2019