主题/风格角2个可重复使用的组件库

我想样式可重复使用的角度分量，以匹配特定的客户端项目的样式。

我在一个单独的项目中维护可重用组件，并生成一个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; } "], 
      },] }, 
];

的MessagesComponent.decorators现在包含在线的样式。

具体问题

使用https://github.com/jvandemo/generator-angular2-library发生器用于创建组件库一个好的选择吗？或者有更好的方法吗？
如何'重写'我的可重用组件的颜色和字体样式？

我曾希望能够在组件库中使用scss变量，该变量可以在客户端项目中（重新）定义。喜欢的东西

可重用的组件messages.component.scss：

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

Client项目/style/_style-vars.scss：

$primary-color: #005CAB;

如何解决这个任何想法？

来源

2017-06-15 mvermand

试试这个方法：

添加SCSS风格的文件夹项目
添加到构建任务 - 复制样式文件夹为 'DIST' 文件夹
安装您的NPM包，客户端项目（NPM I）
从node_modules导入样式，SASS/SCSS表示它应该以〜开头;你应该@import'〜/ dist/scss/somefile来投影scss文件。

来源

2017-11-09 16:28:58

主题/风格角2个可重复使用的组件库

回答

相关问题