Angular根据环境动态交换SASS样式 [英] Angular dynamically swap SASS styles depending on environment

查看:26
本文介绍了Angular根据环境动态交换SASS样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I am using Angular 6 with the new angular.json file where I have configured a separate configuration. In this new configuration I am swapping out my constants.scss for constants.newconfig.scss.

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

It compiles correctly when running ng serve --configuration=newconfig but for some reason it is still using the original constants.scss.

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

Here is the default config for production in the 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已经修改了文件系统.

Would this have something to do with how webpack precompiles sass so by the time Angular replaces the constants file, webpack has already modified the filesystem.

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

推荐答案

您还需要加上 @ angular-devkit/build-angular 才能使其正常工作:

You need to udpate @angular-devkit/build-angular as well for it work:

ng update @angular-devkit/build-angular

这篇关于Angular根据环境动态交换SASS样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆