Angular：如何在GUI中标识生产/开发环境（CSS配置遇阻）

先纠正你之前的配置错误 #

你之前用stylePreprocessorOptions的includePaths是无效的，这个配置是给SCSS/Sass这类预处理器指定全局导入路径的，不是用来直接引入CSS文件的，所以不会生效。

两种简便可行的实现方法 #

方法一：环境变量+动态CSS类（灵活可控）

1. 添加环境标识变量
   在src/environments/下的两个环境文件中新增环境名称：

   // src/environments/environment.ts（开发环境）
   export const environment = {
     production: false,
     envName: 'DEV'
   };
   
   // src/environments/environment.prod.ts（生产环境）
   export const environment = {
     production: true,
     envName: 'PROD'
   };
   

2. 根组件绑定环境类
   在根组件（比如app.component.ts）中引入环境变量，然后在模板外层容器添加动态类：

   // app.component.ts
   import { environment } from '../environments/environment';
   

   <!-- app.component.html -->
   <div [class.env-dev]="environment.envName === 'DEV'" [class.env-prod]="environment.envName === 'PROD'">
     <!-- 应用所有内容 -->
   </div>
   

3. 添加全局样式标识
   在全局样式文件（src/styles.css）中添加对应样式，固定在页面角落：

   .env-dev::before {
     content: '🔧 开发环境（DEV）';
     position: fixed;
     top: 0;
     left: 0;
     background: #ff4444;
     color: #fff;
     padding: 4px 12px;
     font-size: 12px;
     z-index: 9999;
     border-radius: 0 0 4px 0;
   }
   
   .env-prod::before {
     content: '🚀 生产环境（PROD）';
     position: fixed;
     top: 0;
     left: 0;
     background: #00C851;
     color: #fff;
     padding: 4px 12px;
     font-size: 12px;
     z-index: 9999;
     border-radius: 0 0 4px 0;
   }
   

方法二：angular.json配置不同环境加载不同CSS（纯样式配置）

1. 创建环境专属样式文件
   分别创建src/env-dev.css和src/env-prod.css，写入对应标识样式：

   /* src/env-dev.css */
   body::before {
     content: 'DEV 开发环境';
     position: fixed;
     top: 0;
     right: 0;
     background: #ff9800;
     color: #fff;
     padding: 3px 8px;
     font-size: 11px;
     z-index: 9999;
     border-radius: 0 0 0 4px;
   }
   
   /* src/env-prod.css */
   body::before {
     content: 'PROD 生产环境';
     position: fixed;
     top: 0;
     right: 0;
     background: #212121;
     color: #fff;
     padding: 3px 8px;
     font-size: 11px;
     z-index: 9999;
     border-radius: 0 0 0 4px;
   }
   

2. 修改angular.json配置
   在architect > build > configurations下的对应环境中，把专属CSS文件加入styles数组：

   "configurations": {
     "production": {
       // 其他生产配置项...
       "styles": [
         "src/styles.css",
         "src/env-prod.css"
       ]
     },
     "development": {
       // 其他开发配置项...
       "styles": [
         "src/styles.css",
         "src/env-dev.css"
       ]
     }
   }
   

   这样执行ng serve会自动加载开发环境样式，ng build --prod会加载生产环境样式。

注意事项 #

• 样式中的z-index设为9999，确保标识不会被页面其他元素遮挡。
• 方法一支持后续扩展（比如根据环境隐藏/显示某些功能按钮），方法二更轻量化。

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