0

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

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

我的问题：有没有办法在构建 Angular 项目时xxx.component.scss用它们的xxx.component.mobile.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"
    }
  ]

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

4

1 回答 1

0

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']
})
于 2021-12-27T13:53:56.607 回答