如何在Laravel Mix + PostCSS项目中传递全局变量？

1. 安装依赖 #

首先确保安装postcss-simple-vars插件：

npm install postcss-simple-vars --save-dev

2. 配置Laravel Mix的PostCSS #

修改你的Mix配置文件，调整插件顺序并传入动态变量：

mix.postCss('app/styles/app.css', 'dist', [
    require('postcss-import'),
    // 配置postcss-simple-vars，注入动态theme变量
    require('postcss-simple-vars')({
        variables: {
            theme: process.env.PREVIEW ? 'themename-preview' : 'themename'
        }
    }),
    require('tailwindcss')
]);

3. 在CSS中使用变量 #

PostCSS变量无需Sass的#{}插值语法，直接使用$theme即可：

background-image: url(/themes/$theme/images/your-image.png);

关键说明 #

• 插件顺序很重要：postcss-simple-vars必须放在postcss-import之后（确保@import引入的文件也能被变量替换），同时放在tailwindcss之前（避免Tailwind语法干扰变量解析）。
• 环境变量传递：可通过命令行直接设置，比如启动开发服务时：

  PREVIEW=true npm run dev
  

  也可以在项目根目录的.env文件中定义PREVIEW=true，Laravel Mix会自动加载该配置。

内容的提问来源于stack exchange，提问作者Tyssen