我正在尝试基于 Visual Studio 2015 中的 ASPNETCORE-SPA 模板创建 Angular 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是否打包正确?
最佳答案
最简单的方法是将 css 引用添加到 webpack.config.vendor.js 的 vendor 部分,如下所示:
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',
]
},
在这种情况下,您不需要使用import 指令。
关于angular - 如何将 CSS 文件添加到 webpack 以便它们可以在 Angular2 SPA 中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40744761/