diff --git a/docs/guide/essentials/config/environment-variables.md b/docs/guide/essentials/config/environment-variables.md index ee1e2297..8e299665 100644 --- a/docs/guide/essentials/config/environment-variables.md +++ b/docs/guide/essentials/config/environment-variables.md @@ -9,6 +9,10 @@ WXT supports [dotenv files the same way as Vite](https://vite.dev/guide/env-and- .env.local .env.[mode] .env.[mode].local +.env.[browser] +.env.[browser].local +.env.[mode].[browser] +.env.[mode].[browser].local ``` And any environment variables listed inside them will be available at runtime: diff --git a/packages/wxt/src/core/resolve-config.ts b/packages/wxt/src/core/resolve-config.ts index e99dbb10..dc93a319 100644 --- a/packages/wxt/src/core/resolve-config.ts +++ b/packages/wxt/src/core/resolve-config.ts @@ -74,7 +74,7 @@ export async function resolveConfig( const mode = mergedConfig.mode ?? COMMAND_MODES[command]; const env: ConfigEnv = { browser, command, manifestVersion, mode }; - loadEnv(mode); // Load any environment variables used below + loadEnv(mode, browser); // Load any environment variables used below const root = path.resolve( inlineConfig.root ?? userConfig.root ?? process.cwd(), diff --git a/packages/wxt/src/core/utils/env.ts b/packages/wxt/src/core/utils/env.ts index a6a65ae3..cd189ab2 100644 --- a/packages/wxt/src/core/utils/env.ts +++ b/packages/wxt/src/core/utils/env.ts @@ -1,10 +1,21 @@ import { config } from 'dotenv'; +import type { TargetBrowser } from '../../types'; /** - * Load environment files based on the current mode. + * Load environment files based on the current mode and browser. */ -export function loadEnv(mode: string) { +export function loadEnv(mode: string, browser: TargetBrowser) { return config({ - path: [`.env.${mode}.local`, `.env.${mode}`, `.env.local`, `.env`], + // Files on top override files below + path: [ + `.env.${mode}.${browser}.local`, + `.env.${mode}.${browser}`, + `.env.${browser}.local`, + `.env.${browser}`, + `.env.${mode}.local`, + `.env.${mode}`, + `.env.local`, + `.env`, + ], }); }