主題/風格角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個可重複使用的組件庫

回答

相關問題