How to share variables between JS and SCSS?

[amcsi]

This relates to this question and this issue.

Like these people mentioned, I've been using :export in sass files to be able to export variables, and was importing them in both sass and JS files. This is to share variables between JS and SCSS.

But it appears that importing from :export in sass doesn't work in JS/Vue files.

If it's not going to be supported, how can I share variables (e.g. color values) between JS and SCSS (including in the Vue <style> tag)?

[amcsi]

I found the solution 🚀

I realized that the same thing I did for a Laravel Mix 5->6 upgrade worked for Vite too, as per this Github comment of mine.

The gist of it is: _foo.scss (with the exported variables) should be renamed to foo.module.scss, and rather than doing a destructured import of the variables from the scss file, the entire default needs to be imported, and then that can be const destructured.

So rather than doing:

import { primary } from './foo.module.scss';

You would need to do this instead:

import foo from './foo.module.scss';
const { primary } = foo;

[kachmul2004]

Saved my bacon. Thank you beatiful sir

[Erol314]

you are my savior! thanx!

[Roberto-Stanley]

Awesome, it's work great

[Sfolkerts89]

Brilliant!!!!

[UBlaster]

thx man! It's work with webpack too

[tvld]

@amcsi Could you eleborate on "entire default needs to be exported" ?
My scss file my-palette.scss that I import as variables:

$primary: #893e59;
$secondary: #c88c00;

But then the variables.module.scss does not seem to export the variables:

@import './my-palette.scss';

:export {
  $primary: $primary; // does not work ???
}

[amcsi]

@tvld oh. By entire default needing to be "exported" (I meant to say "imported"), I mean instead of:

import { primary } from './variables.module.scss';

You need to do:

import variables from './variables.module.scss';
const { primary } = variables;

[tvld]

Nope, this still shows "color = undefined undefined":

// palette.scss
$gray: #888;

:export {
  primary: $gray;
  secondary: #909;
}

// palette.ts
import variables from './palette.scss'
const { primary, secondary } = variables
console.log('color = ', primary, secondary)

[amcsi]

The file must have .module.scss as the extension. .scss is not enough.

[stephanfriedrich]

Hi @tvld ,
i had a similar problem and my scss variables were not parsed in js.

to complete this post, a solution could be the following to inerpolate scss variables ✊

// palette.scss

$gray: #888;
$primary-color: #fbb70d;

// variables.module.scss

@import './palette.scss';

:export {
  primary: #{$gray};
  secondary: #909;
  #{$primary-color}: #{$primary-color}
}

.module.scss file extension is still necessary

[SageJustus]

@stephanfriedrich What does #{$primary-color}: #{$primary-color} do?

[rthoreau]

It works when I import the file only in the <script></script> from a .vue file like this :

<script>
import colors from '../css/scss/utils/variables.module.scss';
...
</script>

But I get the error "This file is already being loaded" from Vite when I also import the file globaly in a vite.config.ts file like this :

    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "./app_default/css/scss/utils/variables.module.scss";`,
        },
      },
    },

I call it globally to use the same variables in the <style lang="scss"></style> part in a lot of files.
I've tried many solutions, but I never got a global and a local import working at the same time...
Any idea ?

[rthoreau]

If someone has the same problem, my colleague found a solution on this topic : nuxt/vite#117
Now the config looks like that :

    css: {
      preprocessorOptions: {
        scss: {
          additionalData (source, fp) {
            // All scss files ending with imports.scss
            // will not re-import additionalData
            if (fp.endsWith('module.scss')) return source;
            // Use additionalData from legacy nuxt scss options
            return `@use "./app_default/css/scss/utils/variables.module.scss"; ${source}`
          }
        },
      },
    },

[Sfolkerts89]

I havent loaded the .modules.scss file in my config at all and things work just fine.

Nuxt.config:

vite: {
  css: {
	  preprocessorOptions: {
		  scss: {
			  additionalData: '@import "@/assets/scss/variables.scss"; @import "@/assets/scss/mixins.scss";'
		  },
	  },
  },
},

variables.module.scss:

@import "variables";

:export {
    white: $white;
    lightGrey: $light-grey;
    grey: $grey;
    darkGrey: $dark-grey;
    black: $black;
    baseColor: $base-color;
    secondaryColor: $secondary-color;
}

A .vue file:

// colors from SCSS!
import variables from '~/assets/scss/variables.module.scss';

const baseColor = variables.baseColor;

[chrisjbrown]

I'm having trouble getting this working
using nuxt + vite + sass-embedded

vite config

css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler',
        },
      },
    },

js import

import Colors from '../assets/styles/colors.module.scss'

results in error
Unknown file extension ".scss"

has anyone else seen this?

[WoodrowShigeru]

Is anyone else having compilation warnings after this? [ see #15915 (comment) ]