How do I add CSS files to webpack so that they can be used in Angular2 SPA

Question

I am trying to create a Angular 2 SPA application based on the ASPNETCORE-SPA template inside Visual Studio 2015.

I am also trying to utilise the commerical DevExtreme widgets from DevExpress.

I have managed to create the widget in the HTML but the CSS is not getting applied and I suspect that it is because I am not including the CSS correctly in the webpack configurations and not loading it correctly in the HTML / CSHTML files.

I am new to these technologies and after looking around webpack, have been unable to get the CSS to work correctly.

So far I have added the lines:

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';

into my main.ts file as this is the file in the entry point for the webpack.config:

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

and I have added the css rule to the webpack.config.js file:

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

but I get an error:

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).

I am then referencing the button with the following:

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

Can anybody give me any pointers as to where I am going wrong?

Is there any way on seeing whether the CSS is packed correctly?

I have based it on https://github.com/asadsahi/AspNetCoreSpa — Al_B, Nov 22 '16 at 15:56
and I have a CSS file but I can't get it to be webpack'd as I am not sure where to put the import statement. — Al_B, Nov 22 '16 at 15:57
I found that u should install some packages. Here's the official doc https://webpack.github.io/docs/stylesheets.html. In my case I worked with Angular-cli and it's easy to include css files into my project. However, I found some difficulties when I add some external js libraries and jQuery plugins. — Mourad Idrissi, Nov 22 '16 at 16:35

score 4 · Answer 1 · answered Nov 23 '16 at 10:11

The easiest way is to add the css references into the vendor section of the webpack.config.vendor.js as follows:

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',
    ]
},

In this case you don't need to use import directive.

How do I add CSS files to webpack so that they can be used in Angular2 SPA

1 Answers1