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?

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
– Al_B, Commented Nov 22, 2016 at 15:57
I found that u should install some packages. Here's the official doc 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
– Mourad Idrissi, Commented Nov 22, 2016 at 16:35

Alexander Bykov · Accepted Answer · 2016-11-23 10:11:28Z

4

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.

answered Nov 23, 2016 at 10:11

Alexander Bykov

2193 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related