Angular根据环境动态交换SASS样式

时间:2018-09-05 11:40:28

标签: angular webpack sass

我将Angular 6与新的angular.json文件一起使用,在该文件中,我已经配置了单独的配置。在这个新配置中,我将constants.scss换成constants.newconfig.scss。

在运行ng serve --configuration = newconfig时,它可以正确编译,但是由于某些原因,它仍在使用原始常量。

这是angular.json中生产的默认配置

"configurations": {
  "production": {
  ...
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
  ...

这是我添加的内容。

"configurations": {
  "production": { ...Prod stuff... },
  "newconfig": {
  ...
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.newconfig.ts"
    },
    {
      "replace": "src/constants.scss",
      "with": "src/constants.newconfig.scss"
    }
  ]
  ...

这是否与webpack如何预编译sass有关,所以在Angular替换常量文件时,webpack已经修改了文件系统。


更新

  • 我的constants.scss导入到我的根styles.scss的顶部
  • 如果我使用上述方法交换特定组件的sass文件,似乎使用了正确的替换sass文件。因此,我不确定webpack和angular编译器是否针对组件特定的样式表以不同的顺序进行处理

0 个答案:

没有答案