如何在构建角度项目期间进行通配符文件替换？答案

【问题标题】：How to do a wildcard file replacement during build in angular projects?如何在构建角度项目期间进行通配符文件替换？
【发布时间】：2021-12-27 10:46:07
【问题描述】：

我有一个带有 scss 样式的 angular2+ 项目。我的目标是 2 个应用：移动（离子）和具有相同代码库的网络。

由于需要为某些组件加载完全不同的样式表，我正在考虑执行以下操作：将每个组件的 web 样式保存在 xxx.component.scss 中（不变），并且在xxx.component.mobile.scss

中保存每个组件的mobile样式

我的问题：有没有办法在构建 Angular 项目时将 xxx.component.scss 文件替换为对应的 xxx.component.mobile.scss )?

我尝试像这样在 angular.json 中使用通配符，但没有奏效：

"fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.dev.ts"
    },
    {
      "replace": "src/**/*.scss",
      "with": "src/**/*.mobile.scss"
    }
  ]

有没有办法在构建角度项目期间进行通配符文件替换？推荐的方法是什么？

【问题讨论】：

标签： angular-cli angular-builder angularbuild

【解决方案1】：

angular.json 不支持此功能。作为一种解决方法，您可以使用 environment 文件中解析的环境，并相应地替换 .ts 文件中的各个 scss 文件，如下所示：

import { environment } from 'src/environment/envitonment';

isIonic = environment.name === 'ionic';

@Component({
  selector: 'app-xxx',
  templateUrl: './xxx.component.html',
  styleUrls: [ isIonic ? './xxx.component.mobile.css' : './xxx.component.css']
})

【讨论】：