如何基于Angular环境打包外部CSS文件？Angular 5.0.5

当然可以啦！针对Angular 5.0.5的场景，有两种实用方法能实现根据开发/生产环境打包不同的样式文件，我给你一步步拆解清楚：

这种方式直接让CLI根据环境参数打包对应文件，高效且干净：

• 打开项目根目录下的angular-cli.json文件（Angular 5用的是这个配置文件，后续版本才改成angular.json）
• 找到apps数组下的对应应用配置块，添加configurations字段分别定义开发、生产环境的样式文件：

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    // 保留你原有其他配置（比如scripts、assets等）
    "styles": [], // 留空让环境配置覆盖即可
    "configurations": {
      "dev": {
        "styles": ["src/style-dev.scss"]
      },
      "prod": {
        "styles": ["src/style-prod.scss"],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false
        // 这里可以添加其他生产环境需要的配置，比如提取独立CSS文件等
      }
    },
    "environments": {
      "dev": "src/environments/environment.ts",
      "prod": "src/environments/environment.prod.ts"
    }
  }
]

• 运行对应命令启动或构建项目：
  • 开发模式：ng serve --env=dev
  • 生产模式：ng build --env=prod

这种方式的核心优势是CLI只会打包对应环境的样式文件，完全不会把另一个环境的样式代码带入最终产物，性能更优。

如果你的两个样式文件有共享代码，或者想在主样式文件里统一管理逻辑，这种方式更灵活：

1. 先在环境文件里标记环境类型：

   • src/environments/environment.ts（开发环境）：

   export const environment = {
     production: false,
     isDevelopment: true
   };
   

   • src/environments/environment.prod.ts（生产环境）：

   export const environment = {
     production: true,
     isDevelopment: false
   };
   

2. 配置Angular CLI让Sass能识别环境文件：
   在angular-cli.json的apps配置块里添加stylePreprocessorOptions：

   "stylePreprocessorOptions": {
     "includePaths": [
       "src/environments"
     ]
   }
   

3. 在主样式文件（比如src/styles.scss）里通过Sass条件判断导入对应文件：

   // 导入环境变量
   @import 'environment';
   
   // 根据环境动态导入样式
   @if ($environment.isDevelopment) {
     @import 'style-dev.scss';
   } @else {
     @import 'style-prod.scss';
   }
   

4. 正常运行命令即可：

   • 开发模式：ng serve（默认使用开发环境配置）
   • 生产模式：ng build --prod（默认使用生产环境配置）

这种方式的好处是可以在主样式里统一处理共享样式逻辑，不过要注意：编译过程中两个样式文件都会被处理，但最终打包产物里只会包含生效的那部分代码。

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