在Angular 7中,可以使用一个环境变量来设置样式表仅在开发环境中生效。以下是一个解决方法的代码示例:
首先,在src/environments
目录下创建两个环境变量文件:environment.ts
和environment.prod.ts
。
在environment.ts
文件中添加以下内容:
export const environment = {
production: false,
styles: [
'src/styles.css',
// 添加其他开发环境的样式表
]
};
environment.prod.ts
文件中添加以下内容:export const environment = {
production: true,
styles: [
// 只在开发环境使用的样式表不需要添加
]
};
angular.json
文件中,找到architect.build.options
和architect.serve.options
字段,将它们的styles
属性的值更改为以下内容:"styles": [
"src/styles.css",
...environment.styles
],
src/styles.css
文件中,添加以下代码以限制样式表仅在开发环境中生效::host-context(.production) {
display: none !important;
}
src/app/app.component.ts
文件中,添加以下代码以根据环境变量为根元素添加production
类:import { Component, OnInit } from '@angular/core';
import { environment } from '../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
if (environment.production) {
document.documentElement.classList.add('production');
}
}
}
通过这种方式,只有在开发环境中,src/styles.css
样式表才会被加载并应用到组件中。在生产环境中,src/styles.css
样式表将被忽略,并且production
类将被添加到根元素,从而使@host-context(.production)
选择器生效。