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) {

    }

}

得到平坦的＆＃39;在构建期间

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现在包含样式内嵌。

具体问题

使用https://github.com/jvandemo/generator-angular2-library生成器是创建组件库的不错选择吗？或者有更好的方法吗？
我如何覆盖＆＃39;我的颜色和字体样式可重复使用的组件？

我曾希望能够在组件库中使用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 variable definition not working?

Answer 1

尝试这种方式：

将scss styles文件夹添加到项目
添加到构建任务 - 将样式文件夹复制到'dist'文件夹
将您的npm包安装到客户端项目（npm i）
从node_modules导入样式，SASS / SCSS说它应该以〜开头;你应该@import'〜/ dist / scss / somefile来项目scss文件。

Answer 2

在这种情况下我尝试过的操作（请注意，我正在使用Angular v6）：

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

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

在您的app.component.ts中将该组件的viewEncapsulation设置为none：

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

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

这将允许您在app.component.css中拥有的所有样式都可以访问到正在使用的库中。

此快速修复是使组件样式超出当前组件并应用于所使用的库的原因。

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

2 个答案: