Laravel Vite CSS环境变量？process.env使用-php教程-PHP中文网

在 laravel 项目中，vite 环境变量不能直接用于 css，必须通过 js 注入 css 变量、vite.config.js 中 loadenv + additionaldata 预处理，或使用 unplugin-sass-vars 插件注入 scss 变量；blade 中主题切换需结合 php env() 或 config() 服务端判断。

laravel vite css环境变量？process.env使用

在 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=#3b82f6
VITE_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 函数内调用：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

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="%7B%7B%20Vite::useHotFile('.vite/hot')->asset('resources/css/dark.css')%20%7D%7D"><br>
@else<br>
  <link rel="stylesheet" href="%7B%7B%20Vite::useHotFile('.vite/hot')->asset('resources/css/light.css')%20%7D%7D"><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') 安全读取，不受缓存限制。