如何在SCSS中获取环境变量

Question

我想在Laravel中使用混合（mix）获取一个环境变量数据到我的scss文件中。如何才能做到呢？

我已经尝试了下面的方法，但是它只适用于URL，所以不能成功获取环境变量。

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

- S K R

Answer 1

有一种简单的方法可以实现。按照以下步骤操作：

如果我理解错误，请纠正，您希望将一个URL作为变量传递给main-v2.scss文件。

1. 在您的.env文件中添加以下变量：

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

2. 在您的webpack.mix.js文件中添加以下代码：

       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. 接下来，您可以直接在main-v2.scss文件中使用$awsUrl变量，如下所示。

    // Pass to function
    @import url($awsUrl);

   // Or assign to another variable
   $myVariable : $awsUrl;

就这样！

---

更新

对于 Laravel 8+，在第二步中使用以下内容：

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.
})

- Vaibhavraj Roham

---

我正在尝试在 Laravel 8 上运行它，但出现了一个错误。 - Mansour Alnasser

Answer 2

我只能通过在webpack.mix.js中自己引入dotenv才使其工作。

以下代码应该可以工作：

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 + '\';'
})

- Remul

---

是的。导入dotenv包是必要的。 - S K R

Answer 3

对于使用Laravel 8+的用户，data参数已更改为prependData

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

- Mansour Alnasser

Answer 4

在 Laravel 9 上仍然无法工作

在 webpack.mix.js 文件中

.sass('resources/assets/css/theme.scss', 'public/css/themes/style.css', {
    additionalData: '$awsUrl: ' + process.env.MIX_ASSET_URL + ';'
})

在scss文件中

@import url($awsUrl);
$assetUrl: $awsUrl;

- Ghost

---

你需要通过在单引号中引用来转义URL组件，例如“：”和“/”等。 '$awsUrl: \'' + process.env.MIX_ASSET_URL + '\';'就像这样 - S K R