Open kalaomer opened 7 years ago
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!
:)
@shaun-sweet it works great if you only have scss files but fails with scss files & sass files
@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 ?
@darkylmnx You have to stick to either sass or scss, since vue-loader wont' resolve styles but only extract them.
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 https://github.com/vuejs/vue-loader/issues/883#issuecomment-321178868, or mute the thread https://github.com/notifications/unsubscribe-auth/ABXDtUWk-NSyuWpPT-xSZeFm5RON14sbks5sWWJ9gaJpZM4OYBCY .
@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
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.
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
So global_styles is again scoped. But what if I can add global styles with like this
This way is very useful when you try to manage child component's styles.
What does the proposed API look like?