Question

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

我已经使用过类似的东西。但这是一个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文件。

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

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

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

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

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

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

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

就是这样！

Answer 2

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

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

Answer 3

我只需要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 + '\';'
})

如何在scss中获取env变量

3 个答案: