如何在 angular 项目构建期间替换通配符文件？

Question

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

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

中的每个组件保存 mobile 样式

我的问题：在构建 angular 项目时，有没有办法用 xxx.component.mobile.scss 文件替换 xxx.component.scss 文件，类似于 angular 对环境文件所做的（如果配置为 dev，则将 environment.ts 替换为 environment.dev.ts）？

我试过像这样在 angular.json 中使用通配符，但没有成功：

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

有没有办法在 angular 项目的构建过程中替换通配符文件？推荐的方法是什么？

Answer 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']
})

如何在 angular 项目构建期间替换通配符文件？

How to do a wildcard file replacement during build in angular projects?

angular-cli

angular-builder

angularbuild