如何基于Symfony 3.4与Webpack Encore按环境配置body背景色？

嘿，这个需求挺常见的，我来给你梳理几种可行的实现方式，包括你提到的YAML配置和Webpack Encore方案，顺便也聊聊你知道的Twig方法到底算不算最佳实践～

这种方法能把样式配置和Symfony的环境配置统一管理，适合喜欢集中配置的场景。

首先在各环境的配置文件里定义背景色参数：

# config_dev.yml
parameters:
  body_background_color: '#f0f8ff' # 开发环境用浅蓝色

# config_test.yml
parameters:
  body_background_color: '#fff3cd' # 测试环境用浅黄色

# config_prod.yml
parameters:
  body_background_color: '#ffffff' # 生产环境用白色

接下来有两种方式在Twig里使用这个参数：

• 直接在模板里读取参数：

<body style="background-color: {{ parameter('body_background_color') }};">
  <!-- 页面内容 -->
</body>

• 更优雅的方式：把参数注入为Twig全局变量，在config.yml里添加配置：

# config.yml
twig:
  globals:
    body_bg_color: '%body_background_color%'

然后模板里直接用全局变量：

<body style="background-color: {{ body_bg_color }};">

如果想把样式逻辑完全放在前端构建流程里，Webpack Encore的环境变量特性就能派上用场。

第一步，修改package.json的脚本，传递环境变量：

{
  "scripts": {
    "dev": "NODE_ENV=development encore dev",
    "test": "NODE_ENV=test encore dev",
    "prod": "NODE_ENV=production encore production"
  }
}

方式A：用SCSS动态判断环境 #

如果你的项目用SCSS，可以直接在样式文件里根据环境变量切换颜色：

// assets/styles/app.scss
// 默认生产环境颜色
$body-bg-color: #ffffff;

@if getenv('NODE_ENV') == 'development' {
  $body-bg-color: #f0f8ff;
} @else if getenv('NODE_ENV') == 'test' {
  $body-bg-color: #fff3cd;
}

body {
  background-color: $body-bg-color;
}

方式B：用Webpack插件+CSS变量/JS设置 #

如果是纯CSS，可以借助Webpack的DefinePlugin注入环境变量，再通过JS动态修改CSS变量：

先修改webpack.config.js：

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const webpack = require('webpack');

Encore
  // ... 你的其他Encore配置
  .addPlugin(new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
  }))
;

module.exports = Encore.getWebpackConfig();

然后在入口JS文件里设置CSS变量：

// assets/js/app.js
if (process.env.NODE_ENV === 'development') {
  document.documentElement.style.setProperty('--body-bg-color', '#f0f8ff');
} else if (process.env.NODE_ENV === 'test') {
  document.documentElement.style.setProperty('--body-bg-color', '#fff3cd');
}

最后在CSS里使用这个变量：

/* assets/styles/app.css */
body {
  background-color: var(--body-bg-color, #ffffff);
}

其实你一开始想到的用{{ app.environment }}在Twig里处理，完全是Symfony的常规用法，甚至可以说是简单场景下的最佳实践。

比如你可以给body加个环境类：

<body class="env-{{ app.environment }}">

然后在CSS里定义不同类的样式：

body.env-development { background-color: #f0f8ff; }
body.env-test { background-color: #fff3cd; }
body.env-production { background-color: #ffffff; }

这种方式逻辑清晰，不仅能改背景色，后续如果要加其他环境相关的样式（比如开发环境显示调试水印）也很方便，维护成本极低。

• 想把样式配置和Symfony环境配置统一管理？选YAML参数方案；
• 喜欢把样式逻辑放在前端构建流程里？选Webpack Encore方案；
• 追求简单直接、快速实现？Twig+CSS类的方法最省心，完全没问题。

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