[Vuejs]-How can I set global Sass variables in Vue with Webpack?

by

0👍

✅

Your project is not a Vue CLI generated project, so vue.config.js would not be processed at all.

In your case, you’d configure the Sass 7.x loaders in build/utils.js to pass the data option:

exports.cssLoaders = function (options) {
  //...

  return {
    //...
    sass: generateLoaders('sass', { data: `$primaryColor: #16A085;` }),
    scss: generateLoaders('sass', { data: `$primaryColor: #16A085;` }),
  }
}

However, you should be aware of the note from the sass-loader docs:

Please note: Since you’re injecting code, this will break the source mappings in your entry file. Often there’s a simpler solution than this, like multiple Sass entry files.

0👍

I have the same issue and this is my solution:

      return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    scss: generateLoaders('sass', { data: `@import '@/scss/_variables.scss';` }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

My file was in "src" so basically go to top and find folder scss.

Leave a comment