Global import for SASS

[kalaomer]

What problem does this feature solve?

I try to import a file which has global styles to under scoped style. But they compiled scoped again.

Here is my code

.component-name {
    @import "./global_styles";
}

So global_styles is again scoped. But what if I can add global styles with like this

.component-name {
    @import :global("./global_styles");
}

This way is very useful when you try to manage child component's styles.

What does the proposed API look like?

.component-name {
    @import :global("./global_styles");
}

[shaun-sweet]

Use a loader for this. By doing this, you won't have to ever do an import for any global variables or mixins.

From the /build folder in the project, i went to utils.js and inside the generateLoaders() function, I added this

// This makes my vars and mixins avail throughout my app at a global level
    if (loader === 'sass') {
      loaders.push({
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/styles/vars.scss'), 
            path.resolve(__dirname, '../src/styles/mixins.scss')
          ]
        }
      })
    }

make sure you also run npm install --save-dev sass-resources-loader
Last thing is to make sure those files exist or you'll get a compile error. i put them in /src/styles but you can change those lines to put em wherever! OH, also pay attention to the order I have in my resources array. I wanted the vars to get parsed first so that they would be avail to be used from within the mixins. Thanks everyone!

:)

[darkylmnx]

@shaun-sweet it works great if you only have scss files but fails with scss files & sass files

[darkylmnx]

@shaun-sweet whereas the following works great

weird bug, sass-resources-loader maintainers seems to says it's on the vue-loader side not theirs, should i make a full issue for this ?

[Fnll]

@darkylmnx You have to stick to either sass or scss, since vue-loader wont' resolve styles but only extract them.

[darkylmnx]

Well I use scss but the Css framework uses sass so I can't do anything about this. I don't understand what you mean by "only extract" ? Le 9 août 2017 16:40, "fnll" <notifications@github.com> a écrit :

…

@darkylmnx <https://github.com/darkylmnx> You have to stick to either sass or scss, since vue-loader wont' resolve styles but only extract them. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#883 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDtUWk-NSyuWpPT-xSZeFm5RON14sbks5sWWJ9gaJpZM4OYBCY> .

[anish000kumar]

@kalaomer There is a really simple solution to the problem you are facing. I faced it myself, but you can fix it in a few words by modifying the webpack config file a bit. Here's the code and rest of the explanation-
https://stackoverflow.com/a/46015906/5013932

[Jinjiang]

How about writing two <style>s, one is scoped and another is not:

<style lang="sass">
.component-name {
    @import "./global_styles";
}
</style>
<style lang="sass" scoped>
    // other sass code
</style>

Thanks.