在 Laravel 项目中，Vite 环境变量不能直接用于 CSS，必须通过 JS 注入 CSS 变量、vite.config.js 中 loadEnv + additionalData 预处理，或使用 unplugin-sass-vars 插件注入 SCSS 变量；Blade 中主题切换需结合 PHP env() 或 config() 服务端判断。
在 Laravel 项目中用 Vite 管理 CSS 相关的环境变量（比如主题色、CDN 域名、字体加载策略），不能直接在 CSS 文件里写 process.env.VITE_THEME_COLOR，因为 CSS 不解析 JS 语法，且 Vite 不会将环境变量注入纯 CSS；必须通过 JS 注入、CSS 变量桥接或构建时预处理实现。
在 CSS 中使用 Vite 环境变量的正确路径
第一步：确认所有环境变量以 VITE_ 开头，且定义在 .env 或 .env.development 等合法文件中。例如：
VITE_PRIMARY_COLOR=#3b82f6VITE_ASSET_CDN=https://cdn.example.com
第二步：在 resources/js/app.js（或任意入口 JS）中，将环境变量写入 CSS 自定义属性（:root）：
document.documentElement.style.setProperty('--primary-color', import.meta.env.VITE_PRIMARY_COLOR);document.documentElement.style.setProperty('--asset-cdn', import.meta.env.VITE_ASSET_CDN);
第三步：在 resources/css/app.css 中直接使用这些 CSS 变量：
立即学习“前端免费学习笔记（深入）”；
.btn-primary { background-color: var(--primary-color); }.logo { content: url(var(--asset-cdn) + '/images/logo.svg'); }
⚠️ 注意：url(var(--xxx)) 在部分浏览器中不被支持，实际应避免在 url() 内拼接变量；推荐改用 JS 动态设置 backgroundImage 或预设多套 class。
在 Vite 配置中读取环境变量并影响 CSS 构建
Vite 的 vite.config.js 运行在 Node 环境，可安全使用 process.env，但需注意：它无法直接修改 CSS 内容，只能控制构建行为。
方法一：用 loadEnv 显式加载指定环境变量（推荐）
① 在 vite.config.js 顶部导入：
import { defineConfig, loadEnv } from 'vite';
② 在 defineConfig 函数内调用：
export default defineConfig(({ mode }) => {<br>
const env = loadEnv(mode, process.cwd(), '');<br>
return {<br>
css: {<br>
preprocessorOptions: {<br>
scss: {<br>
additionalData: `$primary-color: ${env.VITE_PRIMARY_COLOR};`<br>
}<br>
}<br>
}<br>
};<br>
});
✅ 关键点：【loadEnv(mode, process.cwd(), '') 第三个参数传空字符串，否则默认只加载 VITE_ 开头变量会被过滤掉】；此处为让 SCSS 预处理器能读到原始值，不依赖 import.meta.env。
方法二：通过插件注入全局 SCSS 变量（更稳定）
安装 unplugin-sass-vars 并在 vite.config.js 插件数组中添加：
import sassVars from 'unplugin-sass-vars/vite';<br>
plugins: [<br>
sassVars({<br>
variables: {<br>
primaryColor: import.meta.env.VITE_PRIMARY_COLOR || '#3b82f6'<br>
},<br>
})<br>
]
然后在 .scss 文件中直接用 $primaryColor，无需 additionalData 拼接。
Laravel Blade 中动态切换 CSS 主题
当需要根据环境变量在 Blade 中加载不同 CSS 文件时，不能依赖 JS 运行后才生效，必须服务端决定。
方法1：在 app.blade.php 中用 PHP 读取 .env 值（需确保已加载）：
@if (env('APP_ENV') === 'production' && env('VITE_THEME') === 'dark')<br>
<link rel="stylesheet" href="{{ Vite::useHotFile('.vite/hot')->asset('resources/css/dark.css') }}"><br>
@else<br>
<link rel="stylesheet" href="{{ Vite::useHotFile('.vite/hot')->asset('resources/css/light.css') }}"><br>
@endif
⚠️ 注意：【env() 在生产环境必须配合 config:cache 使用，否则返回 null；未运行 php artisan config:cache 时，Blade 中 env() 不可用】
方法2：在 config/app.php 中封装环境变量：
'theme' => env('VITE_THEME', 'light'),
再在 Blade 中用 config('app.theme') 安全读取，不受缓存限制。
