How to pass .env variables to .scss file

user_13898214 0
Viewed 1506

I'm interested if there is a way to send var from .env file (I'm using custom webpack, reactJS, dotenv, and sass-loader) to .scss file. What I'm trying to do is to send path (string) to my scss to change font url.

On my localhost url is /fonts/font.ttf, but my app is deployed to the subfolder on the server, so it should be something like /shop/fonts/font.ttf.

Tnx in advance. Cheers!

webpack reactjs sass environment-variables
1 Answers

You need to use additionalData property from sass-loader options

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: '$env: ' + process.env.NODE_ENV + ';',
            },
          },
        ],
      },
    ],
  },
};

More info and another approach here: https://webpack.js.org/loaders/sass-loader/#additionaldata

user_56504470
Related