Laravel-mix: How to pass env variable to scss file?

[MovingGifts]

In webpack.mix.js I can access an env variable withprocess.env.MIX_URL, but how can I pass that variable to use is an scss file compiled via:

mix.sass('site.scss', 'public/css')

So we can call it like this:

@font-face {
  font-family: 'My-Font';
  src: url('http://www.site.com/fonts/My-Font.ttf'); // orig working
  src: url(process.env.MIX_URL+'/fonts/My-Font.ttf'); // var not working
}

Any idea how to make it work?

[MovingGifts]

Anyone?

[ankurk91]

You are looking at wrong place:

https://github.com/webpack-contrib/sass-loader#environment-variables

[MovingGifts]

Thank you so much for the link, it solves the issue!

[tomknappramos]

For people coming here, I think the implied answer was to use the prependData feature of sass-loader?
https://github.com/webpack-contrib/sass-loader#prependdata

Haven't tried it myself yet, but it looks like it can do the job.

// webpack
{
  loader: 'sass-loader',
  options: {
    prependData: '$env: ' + process.env.NODE_ENV + ';',
  }
}

[alessioviola]

@MovingGifts can you plz explain how did you solve the issue?

[harshvitra]

How can we implement this in Next js ?