Angular 主题/样式2可重用组件库

一般问题

我想设计可重用的角度组件的样式，以匹配特定客户机项目的样式

我在一个单独的项目中维护可重用组件，并从中生成一个npm包。该软件包发布到一个私有NPM存储库（Sinopia），然后安装到多个客户机项目中

当然，一般的样式是特定于组件的，但是颜色和字体（例如）应该与客户端项目相匹配

如何最好地将客户机项目中定义的颜色和字体等样式应用于可重用组件

当前实施情况

目前，我正在使用它来构建可重用组件库。 它生成了一些吞咽任务，让我可以构建一个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; } "],
            },] },
];

客户项目

/style/\u style-vars.scss

：

.info-message {
   background-color: $primary-color;
   color: white;
 }

$primary-color: #005CAB;

有没有办法解决这个问题

跟进

我更进一步：

我现在使用CSS3变量，这让我几乎达到了目的：

在可重用组件中，我将SCSS变量定义如下：

$primary-color: var(--ang-ux-primary-color, #5FB0FD);

.ang-ux-primary {
  background-color: $primary-color;
}

在我的客户项目中，我定义了如下样式（style.scss）：

这是可行的，但我似乎无法在CSS变量的定义中使用SCSS变量：

$primary-color: #666666;

// styling reusable components
:root {
  --ang-ux-primary-color: $primary-color;
}

导致可重用组件中的$primary颜色为空。 我为此问题打开了一个单独的线程：

请尝试以下方法：

将scss样式文件夹添加到项目中

添加到生成任务-将样式文件夹复制到“dist”文件夹

将您的npm包安装到客户端项目（npm i）

从node_模块导入样式，SASS/SCSS说应该从~；您应该@import'~/dist/scss/somefile到项目scss文件

---

在此上下文中我尝试了什么（请注意，我使用的是Angular v6）：

例如，您正在app.component.html中调用

如果您的app.component.css或app.component.scss包含应在中应用的样式

在app.component.ts中将组件的视图封装设置为无：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

这将允许你在app.component.（s）css中拥有的所有样式扩展到你正在使用的库中

---

此快速修复方法使组件样式超出了当前组件的范围，并应用于所使用的库。

我认为应该有其他方法，而不是禁用ViewEncapsulation。是的，如果有，我洗耳恭听地演示如何创建支持角度材质主题的组件库。虽然它是基于cli的，但可能仍然有帮助。

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})