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

Question

From this blogpost example https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript, I tried to get scss variables in my js code and I did not manage to do it.

index.js file

import variables from './variables.scss';
console.log(variables);

variables.scss file

$myvar: 100;

:export {
  myvar: $myvar;
}

webpack.config.js file

module.exports = {
  mode: 'development',
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: 'css-loader'
        }, {
          loader: 'sass-loader'
        }]
    }]
  }
};

dependencies in package.json file

  "dependencies": {
    "css-loader": "^5.0.2",
    "lodash": "^4.17.20",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.6",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0"
  }

Compilation : npx webpack
Output :

asset main.js 17.2 KiB [compared for emit] (name: main)  
runtime modules 937 bytes 4 modules  
cacheable modules 9.23 KiB  
  modules by path ./src/ 1020 bytes  
    ./src/index.js 324 bytes [built] [code generated]  
    ./src/variables.scss 371 bytes [built] [code generated]  
    ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/variables.scss 325 bytes [built] [code generated]  
  modules by path ./node_modules/ 8.23 KiB  
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]  
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]  
webpack 5.21.2 compiled successfully in 503 ms

In the web console, the object variables is empty and of course, I could not use variables.myvar.
Is there a configuration problem in webpack.config.js ? I tried to simplify it as much as possible. All node_modules are up to date and npm version is 6.14.9.

Thanks for help.

Martin · Accepted Answer · 2021-02-10 08:58:39Z

1

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).

answered Feb 10, 2021 at 8:58

Martin

6,2682 gold badges28 silver badges49 bronze badges

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

4 Comments

Stef1611 Over a year ago

Thanks for answer. I am learning webpack and its configuration. Before, I let nodejs/react do it for me. But it does not work. In your configuration file, in the post css loader, option{ config no longer exists , you must use postcssoptions. But it still does not work. Another config pb.

Martin Over a year ago

you don't need the postcss-loader. I only use it to add fallback values for css custom properties

Stef1611 Over a year ago

I will try without it when I finish my webpack tutorials. I am aware that I need to have a better understanding of webpack and its modules. Thanks a lot for help. I come back soon.

Stef1611 Over a year ago

You were right. It works only for css module. After some webpack tutorials, I understand your answer. It works. I add modules:true in css-loader options and I can get myvar : variables.local.myvar. Thanks a lot.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related