Automatically import SASS/SCSS into every Vue.js component
If you’ve done any work with Vue.js and SASS (or SCSS from here on), you may have run into this a very common issue. You have SCSS variables in one file that you want to make available to your Vue components.
The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue’s single file components you can simply add lang="scss"
to the <style>
block ( docs).
The bad news is in order to use your sweet Sassy variables (or mixins and functions), you have to manually @import
them into each component's style block. As your application grows, you will soon realize how painful this process is.
<style lang="scss">
@import '@/path/to/variables.scss'
/** ... */
</style>
Wouldn’t it be nice if you could just provide those functional SCSS files globally without having to manually import them? Good news, you can!
Vue CLI 4:
- Create a file called vue.config.js (if you do not already have one)
- Add the following lines:
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/_shared.scss";`,
},
},
},
};