我想在项目的中央文件中声明我的颜色托盘。
目前，我正在使用包含贴图的Injectable来引用我所有使用过的颜色。例：
@Injectable()
export class COLOR_DICTIONARY {
private static COLOR_MAP: Map<string, string> = new Map<string, string>();
constructor() {
COLOR_DICTIONARY.COLOR_MAP.set('primary', '#339988');
}
get(key: string) {
return COLOR_DICTIONARY.COLOR_MAP.get(key);
}
}
但是，这迫使我使用ngStyle而不是直接在CSS中引用标记中的所有颜色。
[ngStyle]="{'color': color_dictionary.get('primary')}"
我目前正在对整个网站进行较大的重新设计，并且更改样式文件和标记文件中的样式已变得很麻烦。（甚至是用于添加/更改/删除颜色的打字稿文件）。
如何在中央文件中引用调色板，最好是在XML文件之类的更静态的文件中直接在CSS文件中引用。
我愿意将样式转换为scss文件，如果这样可以使其变得更容易，或者对目的有益。
该项目与webpack捆绑在一起，因此也欢迎任何有关如何为此捆绑解决方案的技巧。
一个不错的现代方法是使用css变量。全球支持相当不错，并且已被有角社区推荐。
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1> Hello </h1>
<h2> World </h2>
`,
styles: [
'h1 { color: var(--primary); }',
'h2 { color: var(--accent); }'
]
})
export class AppComponent {
constructor() { }
ngOnInit() {
const colors = new Map([
['primary', 'blue'],
['accent', 'red'],
])
Array.from(colors.entries()).forEach(([name, value]) => {
document.body.style.setProperty(`--${name}`, value);
})
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句