如何CSS文件添加到的WebPack，使他們能夠在Angular2 SPA使用

我想創建基於Visual Studio內ASPNETCORE-SPA模板2015年如何CSS文件添加到的WebPack，使他們能夠在Angular2 SPA使用

我也嘗試了角2 SPA應用利用DevExpress的商業DevExtreme小部件。

我已經設法在HTML中創建小部件，但CSS沒有得到應用，我懷疑這是因爲我沒有在webpack配置中正確包含CSS，並且沒有在HTML/CSHTML文件中正確加載它。

我對這些技術很陌生，在環顧webpack之後，一直無法讓CSS正常工作。

到目前爲止，我已經添加了幾行：

import '../node_modules/devextreme/dist/css/dx.common.css'; 
import '../node_modules/devextreme/dist/css/dx.light.css'; 
import '../node_modules/devextreme/dist/css/dx.spa.css';

到我main.ts文件，因爲這是在入口點webpack.config文件：

entry: { 
    'main': './Client/main.ts' 
},

，我有添加CSS規則的webpack.config.js文件：

{ test: /\.css$/, loader: extractCSS.extract(['css']) },

，但我得到一個錯誤：

Error: Module 'e:\sources\angular2-3\Application\Error: Module 'e:\sources\angular2-3\Application\node_modules\css\index.js' is not a loader (must have normal or pitch function).

我然後用下面引用按鈕：

<dx-button text="some text"></dx-button>

任何人可以給我任何指針，以我要去的地方錯了嗎？

有什麼方法可以看到CSS是否正確打包？

來源

2016-11-22 Al_B

你使用角度cli嗎？ –

我已經基於它https://github.com/asadsahi/AspNetCoreSpa –

，我有一個CSS文件，但我不能讓它成爲webpack'd，因爲我不知道在哪裏放置導入語句。 –

最簡單的方法是將CSS引用添加到webpack.config.vendor.js的廠商部分如下：

entry: { 
    vendor: [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/platform-server', 
     'angular2-universal', 
     'angular2-universal-polyfills', 
     'bootstrap', 
     'bootstrap/dist/css/bootstrap.css', 
     'es6-shim', 
     'es6-promise', 
     'jquery', 
     'zone.js', 
     'devextreme', 
     'devextreme-angular', 
     'devextreme/dist/css/dx.common.css', 
     'devextreme/dist/css/dx.light.css', 
    ] 
},

在這種情況下，你不需要使用進口指令。

來源

2016-11-23 10:11:28

如何CSS文件添加到的WebPack，使他們能夠在Angular2 SPA使用

回答

相關問題