Export SASS/Scss Variables to JavaScript Without Exporting Them to CSS

Export SASS/SCSS variables to Javascript without exporting them to CSS

Note: I have posted this answer because it seems there is no better solution, however, if someone subsequently provides a better solution, I will be more than happy to accept it.

It seems that the only real solution to this is to extract the export statement out of the _variables.scss file and place it into its own _export.scss file which will subsequently not be included in the SCSS compliation.

This will look something like this:

_variables.scss - included in the SCSS compilation

/* Define all colours */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
// etc...

_export.scss - not included in the SCSS compilation

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    white: #fff;
    black: #000;
    grey: #ccc;
    // etc...

}

And then your app.scss (I use brand.scss) file will look something like this (note the absence of @include "export";):

@import "variables";
@import "mixins";
@import "core";
@import "animations";
// etc...

Then, _export.scss is simply referenced only in JavaScript like so (note that core-styles is just an alias that I used in my projects):

import styles from 'core-styles/brand/_export.scss';

Exporting SCSS Variables to JS (auto looping variables)

Taking a Cue from Bootstrap 4, you could combine a SASS map with a loop like below;

/* Define all colours */$theme-colours: (  some-color: #000,  another-color: #000,  third-color: #000,  fourth-color: #000)
@each $color, $value in $theme-colours {  :export{    $color: $value;  }}

Exporting SCSS variables into JavaScript/Svelte via CSS Modules without lint warning

This works.

:export {
  @each $color, $value in $colors {
    #{"" + $color}: $value;
  }
}

...I'm infuriated

Cannot Export Sass Variables into Javascript

Unfortunately the SASS/SCSS documentation does not mention anything about export, and as such, other than guessing and solving it through trial and error, your best bet is to migrate to SCSS and implement the solution that is widely used (but also not documented).

Personally, I like to import my SCSS variables, and then, export them to JS. So my _export.scss file looks like this:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

NOTE: It is vitally important that _export.scss is only utilised in JS files, and is not imported in SCSS files. Importing _export.scss into your SCSS files will result in a) unecessary style exports in your CSS, and b) duplications of these style exports throughout every compiled SCSS file

How to get SCSS variables into react

That's a webpack/css-loader feature and only works with webpack and css-loader (https://webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features)

Important: the :export syntax in your SCSS/CSS files will only work for those files that are treated as a module by css-loader, because this syntax is part of a css module proposal.
You can...

• either use the default behavior of css-loader and trigger that behavior via filename: e.g. foostyle.module.scss
• or you can configure css-loader to treat all files as modules e.g. loader: 'css-loader', options: { modules: true }

A blogpost with an example can be found here: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
(Be aware that the blogpost doesn't mention the fact that css modules must be used.)

$white-color: #fcf5ed;

:export {
  whitecolor: $white-color;
}

and

import variables from 'variables.module.scss';

console.log(variables.whitecolor)

your webpack.config.js will probably contain a chain of loaders with css-loader as last or second-to-last (process-chronologically speaking) and this should work.

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

I am trying to import SASS variables into my javascript file

:export syntax is a sugar that css-loader adds, all you need to do is to enable the css-modules feature.

You have 2 choices:

1. add .module.scss suffix to your file (since css-module is enabled by default for it)
2. enable css-modules to all .scss imports, by specifying

// webpack.config.js

module.exports = {
  entry: `./sass.js`,
  output: {
    path: `${__dirname}`,
    filename: 'bundle.js',
  },
  mode: 'development',

  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // <- this enables css-modules for all imports
            },
          },
          'sass-loader',
        ],
      },
      // ...
    ],
  },
};

Import Sass variables into Javascript with Webpack Encore 1.7.x

It took me forever to find a suitable solution for my problem, but it was actually quite simple.

I couldn't use the following, since Bootstrap was then exploding.

Encore.configureCssLoader(options => {
  options.modules = true;
});

However, I found out that I could use the ?module suffix on my filename to make Webpack import it as a module.

So the only change I had to make is in assets/someFile.js and it goes like this.

import styles from './styles/config/variables.scss?module';

export default () => {
  console.log(styles.iframeBackgroundColor);
}

I would've preferred a global config, maybe with a test that looks like this:

test: /\.module\.(css|scss|sass)$/

But I can live with it for now.

How to get SCSS variables in js code (nodejs server)?

I wasn't aware of it but maybe this only works for "css modules". I never tried it without having css-loader configured to be module based. (you can see in my config in this answer that modules are activated)
Please try the following: rename your variables.scss into variables.module.scss
Because by default the css-loader will treat your files as modules or not as modules based on the filename (https://webpack.js.org/loaders/css-loader/#modules).

---

Related Topics