如何在scss中获取环境变量答案

【问题标题】：how to get env variable in scss如何在scss中获取环境变量
【发布时间】：2019-11-28 10:00:51
【问题描述】：

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

我用过类似的东西。但是这个是一个 URL，所以，它没有得到。

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

【问题讨论】：

标签： laravel sass environment-variables

【解决方案1】：

有一个简单的方法可以做到这一点。请按照以下步骤操作，

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

在您的.env 文件中添加一个变量，如下所示，

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

在您的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.
    })

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

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

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

就是这样！

更新

对于 Laravel 8+，请在第 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.
})

【讨论】：

我正在 laravel 8 上尝试，但显示错误

【解决方案2】：

我只需要 dotenv 我自己在 webpack.mix.js 中才能工作。

这应该可行：

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

【讨论】：

是的。需要导入 dotenv 包。

【解决方案3】：

对于那些使用 laravel 8+ 的人，参数 data 更改为 prependData

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

【讨论】：