Globally load Sass/Scss into a Vue Project

Question

So, when I was using Vue-cli 3.X I used a method similar to This Thread to load my many style files globally.

However, I have upgraded to Vue-cli 4.X and since then, have been unable to use this technique. I just get this error:

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
        on line 8 of src/styles/global.scss
        from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>>         color: $grey-700;

   ---------------^

Essentially, anything outside of the main screens (such as components) just will not grab anything in my "_variables.scss". (Even if I import them all into one file and use that)

Any suggestions?

(Quick update) I am using node-sass and my config looks like so;

    module.exports = {
     css: {
      loaderOptions: {
       sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
       }
     }
    }
   };

Are you using `sass` or `node-sass` ? Can you add relevant part of your `vue.config.js` ? — Michal Levý, Dec 12 '19 at 00:12
@MichalLevý just gave that a go and throws the same error :/ — KJParker, Dec 12 '19 at 11:44

score 3 · Accepted Answer · answered Dec 12 '19 at 12:02

Ok so, previously it was a case of just using "data:" But, since Vue 4, it seems it now has to be "prependData:"

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/styles/_variables.scss";`
      }
    }
  }
}

score 1 · Answer 2 · answered Dec 14 '20 at 17:42

1

it's changed to additionalData

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/_variables.scss";`
      }
    }
  }
}

answered Dec 14 '20 at 17:42

wi az

11
1

This works for sass-loader@^10 – David Ibia Sep 13 '22 at 16:18

Globally load Sass/Scss into a Vue Project

2 Answers2