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

Question

一般问题

我想要设计可重用的 Angular 组件的样式以匹配特定客户端项目的样式。

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

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

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

当前实施情况

目前我正在使用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; } "],
            },] },
];

nowMessagesComponent.decorators包含内联样式。

具体问题

1. 使用https://github.com/jvandemo/generator-angular2-library生成器是创建组件库的好选择吗？或者还有更好的方法吗？

2. 我如何“覆盖”可重用组件的颜色和字体样式？

我希望能够在组件库中使用 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 为空。我针对这个问题打开了一个单独的线程：Using SCSS variable inside CSS3 variabledefinition not work?

Answer 1

试试这个方法：

1. 将 scss styles 文件夹添加到项目中
2. 添加到构建任务 - 将样式文件夹复制到“dist”文件夹
3. 将 npm 包安装到客户端项目 (npm i )
4. 从node_modules导入样式，SASS/SCSS说应该以~开头；您应该 @import '~/dist/scss/somefile 来项目 scss 文件。