Css 角度5：如何在中心文件中定义颜色托盘

我想在项目的中心文件中声明我的颜色托盘

目前，我正在使用一个包含贴图的可注入函数来引用我使用的所有颜色。例如：

@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);
 }
}

我目前正在对整个网站进行更大的重新设计，在样式文件和标记文件中更改样式变得很麻烦。（甚至还有用于添加/更改/删除颜色的打字脚本文件）

如何在中心文件中引用颜色托盘-最好是一个更静态的文件，如XML文件或其他文件，可以直接在css文件中引用

我愿意将样式转换为scss文件，如果这会使它更容易，或如果它的目的是有益的

---

该项目与webpack捆绑在一起，因此任何关于如何捆绑解决方案的提示都值得赞赏

使用css变量是一种很好的现代方法。全球支持是相当不错的，它已经被推荐

从'@angular/core'导入{Component，Renderer2}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好
世界
`,
风格：[
'h1{color:var（--primary）；}'，
'h2{color:var（--重音）；}'
]
})
导出类AppComponent{
构造函数（）{}
恩戈尼尼特（）{
const colors=新地图([
['primary'，'blue']，
[“重音”，“红色”]，
])
Array.from（colors.entries（））.forEach（（[name，value]）=>{
document.body.style.setProperty（`-${name}`，value）；
})
}
}

---

使用css变量是一种既好又现代的方法。全球支持是相当不错的，它已经被推荐

从'@angular/core'导入{Component，Renderer2}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好
世界
`,
风格：[
'h1{color:var（--primary）；}'，
'h2{color:var（--重音）；}'
]
})
导出类AppComponent{
构造函数（）{}
恩戈尼尼特（）{
const colors=新地图([
['primary'，'blue']，
[“重音”，“红色”]，
])
Array.from（colors.entries（））.forEach（（[name，value]）=>{
document.body.style.setProperty（`-${name}`，value）；
})
}
}

---

我只会在根组件中实现这一点，然后所有css文件都可以使用

var（--primary）

引用它。是的，这是正确的。组件还可以通过指定自己的

--主

或

--次

变量来覆盖此变量。这是一个出色的回答，也是对问题的完美回答。谢谢很高兴我能帮上忙：）这正是我所需要的+1I将只在根组件中实现这一点，然后所有css文件都可以使用

var（--primary）

？是的，这是正确的。组件还可以通过指定自己的

--主

或

--次

变量来覆盖此变量。这是一个出色的回答，也是对问题的完美回答。谢谢很高兴我能帮上忙：）这正是我所需要的+1.

[ngStyle]="{'color': color_dictionary.get('primary')}"

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);
    })

  }
}