VueJS and SASS - Import and use SASS variables in script

Question

I'm currently working on a VueJS project with a SASS integration, and I would like to get access to the SASS variables inside the script part of the component to make dynamic style calculations. I saw examples of this with pure JS, and I'm trying to translate that to a VueJS component.
So far, I've been able to integrate SASS variables in the style part of the Vue file, but I can't get the variables imported into the script of the component.

I tried the following:
Exporting the variables from my scss file:

:export {
    primaryColor: $primary;
}

And then import the file in my component:

import variables from '@/assets/scss/main.scss'

And access it like so: variables.primaryColor

But I can't get it working, variables is always an empty object with no value inside. I'm using Nuxt with the packages node-sass and sass-loader installed. Any help would be appreciated!

Marcello B. · Accepted Answer · 2021-04-05 03:09:17Z

3

If you want to just access the variables from a SASS file you can add this to configureWebpack in your vue.config.js file:

module:{
  rules: [{
    test: /\.scss$/,
    use: [{
      loader: "style-loader"
    }, {
      loader: "css-loader" 
    }, {
      loader: "sass-loader"
    }]
  }]
}

Then let's say that you have a file containing your SASS variables called style.sass that looks something like this

$btn-color: #D75893

:export
    buttonColor: $btn-color

In your <script> tag you can import your SASS variables file like so

import styleInfo from 'style.sass';

and access your variables like so

console.log("The button color is", styleInfo.buttonColor);

Note: It is not possible to dynamically change SASS variables at run time as the variables are compiled.

Sources: This article from HashRocket and This article from itnext

edited Apr 5, 2021 at 3:09

answered Apr 3, 2021 at 22:50

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ericlm Over a year ago

Thank you very much for your answer! I'm using Nuxt so it adds a little more complexity, but I hope your answer gave me enough informations. 🤞

user19858571 · Accepted Answer · 2023-08-16 05:36:48Z

1

The config file changes did not work for me. Here is how I did it without touching any config file:

In your component , write the import using Vue-loader instead of the usual import syntax:

import variables from '@/assets/scss/main.scss?vue&type=style&index=0&lang=scss&module=1'

This code includes: scss file path + queries which specifically ask Vue-loader to load CSS. The query starts after the ?.

You can also import the css variables from the same component's <style> tag to <script>. To do this, in the component's script tag, change the scss file path to your component's path:

import variables from '@/MyComponentName.vue?vue&type=style&index=0&lang=scss&module=1'

Source: How to share SASS variables with JavaScript code in VueJS

edited Aug 16, 2023 at 5:36

answered Aug 16, 2023 at 5:34

user19858571

711 silver badge6 bronze badges

Comments

VladStepu2001 · Accepted Answer · 2024-07-17 12:10:09Z

0

For me, it was just enough to add ".module" to the SCSS file name ("name.module.scss"), without either editing "vue.config.js" or appending that long arguments list.
I have a Vue.js 3 project created with Vue CLI.

The source - https://stackoverflow.com/a/71942017/12136394

answered Jul 17, 2024 at 12:10

VladStepu2001

1712 silver badges10 bronze badges

Collectives™ on Stack Overflow

VueJS and SASS - Import and use SASS variables in script

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related