主题/样式Angular 2可重用组件库 [英] Theme/style Angular 2 reusable component libraries

问题描述

一般问题

我想设置可重复使用的Angular组件的样式以匹配特定客户端项目的样式.

I want to style reusable Angular components to match the style of the specific client project.

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

I maintain the reusable components in a separate project and generate an npm package out of it. That package is published to a private NPM repository (Sinopia) and then installed into multiple client projects.

通常的样式当然是特定于组件的，但是颜色和字体(例如)应与客户项目相匹配.

The general styling is - of course - specific to the component, but color and font - for example - should match the client project.

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

How can I best apply styles such as color and font, defined in the client project, to the reusable components?

当前实施

此刻，我正在使用 https://github.com/jvandemo/generator-angular2 -library 来支持可重用的组件库. 它生成了一些Gulp任务，这些任务使我可以构建dist版本. 发布该dist并使用已发布的程序包可以很好地工作，但是所构建的代码使我很难找出可行的主题策略.

At the moment I am using https://github.com/jvandemo/generator-angular2-library to scaffold the reusable component library. It generates some Gulp tasks which let me build a dist version. Publishing that dist and using the published package works just fine but the built code makes it hard for me to figure out a working theming strategy.

Gulp构建任务将在最终代码中内嵌HTML和CSS资源.

The Gulp build task will inline both the HTML and CSS resources in the final code.

示例组件

@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; } "],
            },] },
];

MessagesComponent.decorators现在包含嵌入式样式.

The MessagesComponent.decorators now contains the styling in-line.

具体问题

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

1. Is using the https://github.com/jvandemo/generator-angular2-library generator a good choice for creating component libraries? Or are there better ways?

我该如何覆盖"我的颜色和字体样式 可重用的组件?

How do I have to 'override' the color and font styling of my reusable components?

我希望能够在组件库中使用scss变量，该变量可以在客户端项目中(重新)定义.像

I had hoped to be able to use scss variables in the component library which could be (re-)defined in the client project. Something like

可重用组件messages.component.scss:

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

客户端项目/style/_style-vars.scss:

$primary-color: #005CAB;

关于如何解决这个问题的任何想法?

Any ideas on how to tackle this?

跟进

我又走了一步:

我现在使用CSS3变量，这几乎可以实现我的目标:

I now use CSS3 variables and that gets me almost there:

在可重用组件中，我按如下方式定义SCSS变量:

In the reusable component, I define my SCSS variables as follows:

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

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

在我的客户项目中，我定义了这样的样式(style.scss):

and in my client project I define the styles like this (style.scss):

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

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

This works, but it seems I cannot use SCSS variables in the definition of my CSS variable:

$primary-color: #666666;

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

在可重用组件中产生一个空的$ primary-color. 我为此问题打开了一个单独的线程:在CSS3中使用SCSS变量变量定义不起作用?

results in an empty $primary-color in the reusable component. I opened a separate thread for this issue: Using SCSS variable inside CSS3 variable definition not working?

推荐答案

尝试这种方式:

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

这篇关于主题/样式Angular 2可重用组件库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！