Share global Sass files across Vue project without @import

Have you ever worked on a Vue.js project with Sass and wanted to share things like variable, functions, or mixins across your entire application without having to use @import in every componet? Good news, you don’t have to.

Vue CLI 3:

  • Create a file called vue.config.js (if you do not already have one)

Vue CLI 2:

  • Open the file called /build/utils.js

Things to note:

Both methods above assume you are storing your shared Sass in a file at /src/_shared.scss.

These files will be imported and available to every component you write which is great for things like variables, functions, or mixins, but you want to avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, you can create a separate file and import it into your main App.vue file instead.

Full Stack @Revealbio | Author of Vuetensils & Particles CSS | Panelist @ViewsOnVue | Board Member @sandiegojs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store