如何在scss中获取env变量 [英] how to get env variable in scss

问题描述

我想通过使用Laravel中的mix在我的scss文件中获取一个env变量数据。

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

我用过这样的东西。

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

推荐答案

有一种简单的方法。请按照以下步骤操作，

There is a simple way to do it. Follow steps as below,

如果错误，请纠正我，您要将URL传递给 main-v2.scss 文件

Correct me if wrong, you want to pass an URL to main-v2.scss file as a variable.

1. 在您的 .env 中添加变量

MIX_AWS_URL ='https：//your-aws-endpoint.xyz？v1'

在您的 webpack.mix.js 文件中，添加以下内容，

In your webpack.mix.js file, add as below,

    mix.sass('resources/assets/sass/main-v2.scss', 'public/css', {
       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.
    })

接下来，您可以在 main-v2.scss 文件中直接使用 $ awsUrl 变量，如下所示。

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;

就是这样！

这篇关于如何在scss中获取env变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！