一般问题
我想要设计可重用的 Angular 组件的样式以匹配特定客户端项目的样式。
我在一个单独的项目中维护可重用组件，并从中生成一个 npm 包。该包被发布到私有 NPM 存储库 (Sinopia)，然后安装到多个客户端项目中。
当然，一般样式是特定于组件的，但例如颜色和字体应该与客户端项目相匹配。
如何最好地将客户端项目中定义的颜色和字体等样式应用到可重用组件？
当前实施情况
目前我正在使用https://github.com/jvandemo/generator-angular2-library https://github.com/jvandemo/generator-angular2-library搭建可重用组件库。
它生成一些 Gulp 任务，让我构建一个 dist 版本。
发布该 dist 并使用已发布的包效果很好，但构建的代码使我很难找出可行的主题策略。
Gulp 构建任务将在最终代码中内联 HTML 和 CSS 资源。
示例组件
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.scss'],
})
export class MessagesComponent {
constructor(private messagesService: MessagesService) {
}
}
在构建过程中被“扁平化”
var MessagesComponent = (function () {
/**
* @param {?} messagesService
*/
function MessagesComponent(messagesService) {
this.messagesService = messagesService;
}
...
return MessagesComponent;
}());
MessagesComponent.decorators = [
{ type: Component, args: [{
selector: 'app-messages',
template: "<div *ngFor=\"let message of messages\"> <div class=\"message {{message.type}}-message\"> {{message.message}} <i class=\"fa fa-remove\" (click)=\"removeMessage(message)\">x</i> </div> </div>",
styles: [".message { line-height: 36px; padding: 4px 20px; margin: 2px; position: relative; } .message .fa-remove { position: absolute; right: 20px; cursor: pointer; } .info-message { background-color: #005CAB; color: white; } .error-message { background-color: red; color: white; } "],
},] },
];
The MessagesComponent.decorators现在包含内联样式。
具体问题
正在使用https://github.com/jvandemo/generator-angular2-library https://github.com/jvandemo/generator-angular2-library生成器是创建组件库的好选择吗？或者还有更好的方法吗？
我如何“覆盖”我的颜色和字体样式
可重复使用的组件？
我希望能够在组件库中使用 scss 变量，这些变量可以在客户端项目中（重新）定义。就像是
可重复使用的组件messages.component.scss:
.info-message {
background-color: $primary-color;
color: white;
}
客户项目/style/_style-vars.scss:
$primary-color: #005CAB;
关于如何解决这个问题有什么想法吗？
跟进
我更进一步：
我现在使用 CSS3 变量，这让我几乎成功了：
在可重用组件中，我定义 SCSS 变量如下：
$primary-color: var(--ang-ux-primary-color, #5FB0FD);
.ang-ux-primary {
background-color: $primary-color;
}
在我的客户项目中，我定义了这样的样式（style.scss）：
// styling reusable components
:root {
--ang-ux-primary-color: #666666;
}
这可行，但似乎我无法在 CSS 变量的定义中使用 SCSS 变量：
$primary-color: #666666;
// styling reusable components
:root {
--ang-ux-primary-color: $primary-color;
}
导致可重用组件中的 $primary-color 为空。
我针对这个问题开了一个单独的线程：在 CSS3 变量定义中使用 SCSS 变量不起作用？ https://stackoverflow.com/questions/50534058/using-scss-variable-inside-css3-variable-definition-not-working
