Automatically import SASS/SCSS into every Vue.js component
Tags: development, vue, javascript
Published: 2020-11-20 16:15:24

---
title: Automatically import SASS/SCSS into every Vue.js component
published: true
date: 2020-11-20 14:46:26 UTC
tags: Development,Vuejs,javascript,js
canonical_url: https://austingil.com/global-sass-vue-project/
cover_image: https://austingil.com/wp-content/uploads/Vue-Blog-Cover.png
---


If you’ve done any work with [Vue.js](https://vuejs.org/) and [SASS](https://sass-lang.com/) (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](https://vuejs.org/v2/guide/single-file-components.html) you can simply add `lang="scss"` to the `<style>` block ([docs](https://cli.vuejs.org/guide/css.html#pre-processors)).

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.

```html
<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:

```js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};
```

Note that if you are upgrading a project from Vue CLI 3, then you may run into the issue:

```
Sass Loader has been initialised using an options object that does not match the API schema.
```

In which case, you may have an outdated config file. See the next section for Vue CLI 3 regarding the `sass-loader` versions.

## Vue CLI 3:

-   Create a file called vue.config.js (if you do not already have one)
-   Add the following lines:

```js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/_shared.scss";`,
      },
    },
  },
};
```

**UPDATE:** If you have upgraded `sass-loader`, you may run into an issue:

```
Sass Loader has been initialised using an options object that does not match the API schema.
```

The solution is to replace `data` in the options above with `prependData` for version 8, and `additionalData` for version 9.

## Vue CLI 2:

-   Open the file called `/build/utils.js`
-   Find the line containing `scss: generateLoaders('sass')`
-   Replace it with the following:

```js
scss: generateLoaders("sass").concat({
  loader: "sass-resources-loader",
  options: {
    resources: path.resolve(__dirname, "./src/_shared.scss")
  }
})
```

## Things to keep in mind:

Both methods above assume you are storing your shared Sass in a file at `/src/_shared.scss`. If your project uses a different file name or folder, adjust accordingly.

These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should 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, create a separate file and import it into your main App.vue file instead.

And if you thing other folks might find this content useful, please [share it](https://twitter.com/share?via=Stegosource), and [sign up for the newsletter](https://austingil.com/newsletter/) to get notified when new articles come out.