PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, August 19, 2022

[FIXED] how to get env variable in scss

 August 19, 2022     environment-variables, laravel, sass     No comments   

Issue

I want to get one env variable data in my scss file by using mix in Laravel. How to get that?

I have used something like this. But this one is a URL, so, it is not getting.

mix.sass('resources/assets/sass/main-v2.scss', 'public/css', {
    data: `awsUrl: "${(process.env.MIX_AWS_S3_CDN)}" ;`
})

Solution

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.

  1. Add a variable in your .env file as below,

    MIX_AWS_URL='https://your-aws-endpoint.xyz?v1'

  2. 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.
        })
    
  3. Next, you can directly use $awsUrl variable in your main-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.
})


Answered By - Vaibhavraj Roham
Answer Checked By - David Goodson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing