爲了給出我面對的確切場景,我試圖使用Webpack將Zurb的Foundation包打包到我的應用程序中。看看捆綁的JS,基金會SCSS 是得到導入,但我不知道如何將它應用到我的應用程序的呈現。如何將全局樣式應用於Angular2應用程序?
我的根組件的樣式屬性嘗試了require('../../node_modules/foundation.scss/foundation.scss)
,並且似乎對風格,組件的HTML,但是任何的子組件而不是HTML。
這樣做的正確方法是什麼?
爲了給出我面對的確切場景,我試圖使用Webpack將Zurb的Foundation包打包到我的應用程序中。看看捆綁的JS,基金會SCSS 是得到導入,但我不知道如何將它應用到我的應用程序的呈現。如何將全局樣式應用於Angular2應用程序?
我的根組件的樣式屬性嘗試了require('../../node_modules/foundation.scss/foundation.scss)
,並且似乎對風格,組件的HTML,但是任何的子組件而不是HTML。
這樣做的正確方法是什麼?
如果您將css文件包含在根文件夾中的index.html文件中,則應將其應用於您的整個應用程序。
否則,您可以使用組件元數據中的style屬性將特定的css文件包含到特定組件。
更新由於澄清的意見:
您可以使用提取文本插件的webpack。 「它將輸入塊中的每個require(」style.css「)移動到一個單獨的css輸出文件中,所以你的樣式不再被內聯到javascript中,而是分離到一個css包文件(styles.css)中。體積很大,它會更快,因爲樣式表包與javascript包並行加載。「
https://github.com/webpack/extract-text-webpack-plugin
只對css做這你不會修改,因爲熱重新加載將不可用。我認爲你不會對foundation.css進行修改,所以只能創建一個單獨的捆綁CSS爲該
我可能會誤解,但它聽起來像你已經找到一種方法來包括主要基礎的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,然後只導入該組件到你的根應用程序組件
你能上展開「全球CSS」組件以解釋這將如何與Webpack一起工作?我不知道如何注入Webpacked CSS,而不需要它在JS文件中。 – user1381745
已更新的答案。問題是如何編譯scss到css?如果是這樣,有很多鏈接顯示如何做到這一點。 – user2263572
編號Webpack正在將我的SCSS正確編譯爲CSS,並將該CSS注入到我的bundle.js文件中。我不知道該怎麼做,然後將該CSS應用於(某些)整個文檔,而不是通過該組件的styles屬性的單獨組件。由於沒有獨立的CSS文件可以參考你的例子,一個簡單的鏈接標籤是不夠的(我希望...)。 – user1381745