2016-11-06 91 views
0

我已經下載了該建議添加的NPM模塊:Webpack2等效的html腳本標籤?

<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" /> 
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script> 

要我index.html文件。

有沒有一種方法可以要求與來自angular2組件的Webpack 2具有相同的引用?

例如

import 'ng2-toastr.min.js' 

in the component?

回答

0

說明中給出的建議很奇怪。您不必包含<script>標籤,因爲您使用的是webpack,該腳本將作爲webpack包的一部分自動加載。

至於css,你也可以使用webpack。首先,你需要安裝相應的裝載機能夠加載css文件和應用樣式到DOM:

npm install --save style-loader raw-loader 

然後在某處你的打字稿文件,你可以這樣做:

import 'style!raw!../node_modules/ng2-toastr/ng2-toastr.css' 

(請注意,../node_modules的相對路徑可能因應用程序中的嵌套級別而異。

style!raw!前綴是有關webpack to通過「loaeers」處理給定的腳本。

raw加載器將剛纔讀的CSS文件是不嘗試做任何進一步的處理(可以使用css!加載器,如果你需要做additioanl之類的東西@import.css文件,但在這種情況下,這不是必要的,所以最簡單的是原始裝載機。

style裝載機採用由raw加載器加載CSS和編程它適用於當前頁面的DOM,它實際上並沒有創造一個<style>標籤與src="url....",但它實現這是確保加載的CSS中的樣式加載在頁面上的重要部分。

如果你需要經常這樣做,你可以隨時加載器的配置添加到您的webpack.config.js

module: { 
    loaders: [ 
    {test: /\.tsx?$/, loader: 'ts-loader'}, 
    {test: /\.css$/, loader:'style!raw'} 
    ] 
} 

然後,你可以這樣做:

import '../node_modules/ng2-toastr/ng2-toastr.css'