2016-03-31 105 views
0

爲了給出我面對的確切場景,我試圖使用Webpack將Zurb的Foundation包打包到我的應用程序中。看看捆綁的JS,基金會SCSS 得到導入,但我不知道如何將它應用到我的應用程序的呈現。如何將全局樣式應用於Angular2應用程序?

我的根組件的樣式屬性嘗試了require('../../node_modules/foundation.scss/foundation.scss),並且似乎對風格,組件的HTML,但是任何的子組件而不是HTML。

這樣做的正確方法是什麼?

回答

-1

如果您將css文件包含在根文件夾中的index.html文件中,則應將其應用於您的整個應用程序。

否則,您可以使用組件元數據中的style屬性將特定的css文件包含到特定組件。

更新由於澄清的意見:

+0

你能上展開「全球CSS」組件以解釋這將如何與Webpack一起工作?我不知道如何注入Webpacked CSS,而不需要它在JS文件中。 – user1381745

+0

已更新的答案。問題是如何編譯scss到css?如果是這樣,有很多鏈接顯示如何做到這一點。 – user2263572

+0

編號Webpack正在將我的SCSS正確編譯爲CSS,並將該CSS注入到我的bundle.js文件中。我不知道該怎麼做,然後將該CSS應用於(某些)整個文檔,而不是通過該組件的styles屬性的單獨組件。由於沒有獨立的CSS文件可以參考你的例子,一個簡單的鏈接標籤是不夠的(我希望...)。 – user1381745

1

您可以使用提取文本插件的webpack。 「它將輸入塊中的每個require(」style.css「)移動到一個單獨的css輸出文件中,所以你的樣式不再被內聯到javascript中,而是分離到一個css包文件(styles.css)中。體積很大,它會更快,因爲樣式表包與javascript包並行加載。「

https://github.com/webpack/extract-text-webpack-plugin 

只對css做這你不會修改,因爲熱重新加載將不可用。我認爲你不會對foundation.css進行修改,所以只能創建一個單獨的捆綁CSS爲該

4

我可能會誤解,但它聽起來像你已經找到一種方法來包括主要基礎的CSS到根組件,但這然後,CSS不適用於任何其他組件,我是對嗎?

如果是這樣的話,那麼我想你需要設置根組件使用: 封裝:ViewEncapsulation.None

根組件在裏面你需要導入此:

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

和然後執行此操作:

@Component({ 
    moduleId: module.id, 
    selector: 'global-css', 
    templateUrl: 'global-css.component.html', 
    styleUrls: ['global-css.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 

ViewEncapsulation.None基本上說不要只將CSS範圍限制爲僅限此組件。

如果由於某種原因,在根組件這樣做是不允許的,嘗試創建具有ViewEncapsulation.None,然後只導入該組件到你的根應用程序組件

相關問題