how to get env variable in scss
There is a simple way to do it. Follow steps as below,
Correct me if wrong, you want to pass an URL to main-v2.scss
file as a variable.
Add a variable in your
.env
file as below,MIX_AWS_URL='https://your-aws-endpoint.xyz?v1'
In your
webpack.mix.js
file, add as below,mix.sass('resources/assets/sass/main-v2.scss', 'public/css', { // Use "data" for prependData instead of data. data: '$awsUrl:\'' + process.env.MIX_AWS_URL + '\';' // single quotes needs to be added as your URL contains : (colon) so, it may create an issue. Better to escape. })
Next, you can directly use
$awsUrl
variable in yourmain-v2.scss
file as below.// Pass to function @import url($awsUrl); // Or assign to another variable $myVariable : $awsUrl;
That's it!
Update
For Laravel 8+, use below in step 2,
mix.sass('resources/assets/sass/main-v2.scss', 'public/css', {
prependData: '$awsUrl:\'' + process.env.MIX_AWS_URL + '\';'
// single quotes needs to be added as your URL contains : (colon) so, it may create an issue. Better to escape.
})
I only got it working requiring dotenv
myself inside webpack.mix.js
.
This should work:
let mix = require('laravel-mix');
require('dotenv').config();
mix.sass('resources/assets/sass/main-v2.scss', 'public/css', {
data: '$awsUrl:\'' + process.env.MIX_AWS_URL + '\';'
})