如何在Laravel Mix中将环境变量传入SCSS文件？URL变量获取失败

嘿，我来帮你搞定这个问题！你之前的写法差了几个关键细节，导致环境变量没正确注入到SCSS里，尤其是URL这类字符串变量，得注意SCSS的语法规则。

第一步：确认环境变量的命名规则 #

首先你已经做对了一点——Laravel Mix只会识别以MIX_开头的环境变量，所以你的MIX_AWS_S3_CDN命名是没问题的，确保.env里的变量值正确：

MIX_AWS_S3_CDN=https://your-actual-cdn-url.com

第二步：修正Mix的Sass配置 #

你之前的问题出在SCSS变量的定义格式上：SCSS变量必须以$开头，而且要符合SCSS的语法。另外，不同版本的Laravel Mix可能用不同的配置字段（旧版用data，新版Mix 6+用additionalData），给你两种写法：

旧版Laravel Mix（比如Laravel 7及以下）

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

新版Laravel Mix（Laravel 8+，Mix 6及以上）

data字段被弃用了，改用additionalData：

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

第三步：在SCSS中正确使用变量 #

现在你可以在main-v2.scss里直接调用这个变量了，注意如果是在url()里使用，需要用SCSS的插值语法#{}把变量包起来（避免字符串解析问题）：

// 示例：使用CDN地址加载背景图
.hero-bg {
  background-image: url(#{$awsUrl}/images/hero-bg.jpg);
}

重要提醒 #

修改.env文件后，一定要重启Mix的watch命令！因为环境变量只会在Mix启动时加载，热重载不会重新读取.env的内容，不重启的话新变量值不会生效。

内容的提问来源于stack exchange，提问作者S K R