CODEWITHSUNDEEP
angularasp.net-corewebpacksingle-page-applicationdevextreme
Al_B
Al_B

Reputation: 437

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

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?

Upvotes: 4

Views: 4145

Answers (1)

Alexander Bykov
Alexander Bykov

Reputation: 219

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.

Upvotes: 4

Related Questions