在Angular中,可以使用环境变量来加载不同的样式。
首先,需要在angular.json文件中定义不同环境的配置。在projects下的architect中找到build和serve,分别为不同的环境配置添加configurations。
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"development": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.dev.css"
],
"scripts": []
}
}
接下来,在src文件夹下创建不同环境的样式文件,例如styles.dev.css和styles.css。
然后,在angular.json文件中找到architect > build > options,将styles的值设置为src/styles.css。
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
最后,在styles.css文件中使用CSS的@import语法引入不同环境的样式文件。
@import url('styles.dev.css');
/* 其他样式代码 */
这样,根据不同的环境配置,在构建或运行应用时,Angular会自动加载对应的样式文件。