laravel - 如何在scss中获取环境变量

Question

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

我用过类似的东西。但这是一个 URL，因此无法获取。

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

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+，请在步骤 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.
})