Angular根据环境动态交换SASS样式 [英] Angular dynamically swap SASS styles depending on environment
问题描述
我将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屋!