Using sass variables in a VueJS component Using sass variables in a VueJS component vue.js vue.js

Using sass variables in a VueJS component


Importing the _variables.scss in every component seems to be the only solution I've found so far (it should work, according to this issue).

<template>    <div class="my-color"></div></template><style lang="sass">    @import 'path/to/your/_variable.scss'; // Using this should get you the variables    .my-color {        color: $primary-color;    }</style><script>    export default{        data(){            return {}        }    }</script>

As you are only going to include variables, this shouldn't be a problem.

But as mentioned in the issue, a word of caution: You should only include abstract entities (variables, extends, mixins) into every component, no concrete CSS rules.


Assuming you are using vue-cli, try this.

If you don't already have the sass loader installed:

npm install -D sass-loader node-sass

Then in vue.config.js:

const path = require('path');module.exports = {  css: {    loaderOptions: {      sass: {        data: `@import "@/pathto/variables.scss";`      }    }  }};

In your component:

<style lang="sass">    .my-color {        color: $primary-color;    }</style>

Source:

Edit:

As of sass-loader 8, data needs to be prependData (Thanks to @ben-y for pointing this out):

const path = require('path');module.exports = {  css: {    loaderOptions: {      sass: {        prependData: `@import "@/pathto/variables.scss";`      }    }  }};


I'm using the latest version (v9.0.2) of sass-loader, and prependData doesn't seem like an option now. You might want to try this configuration in vue-config.js. Notice the additionalData option is being used as there's no longer a prependData option.

module.exports = {  css: {    loaderOptions: {      sass: {        additionalData: '@import "@/pathto/variables.scss";'      }    }  }}