CODEWITHSUNDEEP
visual-studiowebpackaspnetcoretemplatepack
J4N
J4N

Reputation: 20717

WebPack in VS2015: How to configure a new pack?

I've started with a template from this extension to have a running angular2+ .net core starting point. I didn't want to use boostrap, but materialize-css, so I removed the bootstrap package in package.json, instead I added "materialize-css": "0.98.0",

Then I edited the webpack.config.vendor.js, I removed bootstrap and added materialize-css to the "vendor" list.

Then I rebuilt everything, but it seems that materialize-css is still not present(cannot find its css classes). I tried to clear the browser cache, tried even to open on a brand new browser(edge), but still, no materialize-css classes.

What did I miss?

EDIT

Currently, my vendor list is the following:

    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',
        'materialize-css',
        'es6-shim',
        'es6-promise',
        'jquery',
        'zone.js',
    ]

Upvotes: 0

Views: 261

Answers (1)

m1kael
m1kael

Reputation: 2851

You're doing everything correctly, just need to do one thing slightly differently. In your webpack.config.vendor.js, instead of materialize-css, add materialize-css/dist/css/materialize.css to the vendor array:

...
entry: {
    vendor: {
        ...
        'materialize-css/dist/css/materialize.css',
        ...
    }
}

This will include the css to your resulting bundle. If you also need fonts and js from materialize-css, you'll need to configure appropriate loaders, see https://www.npmjs.com/package/materialize-loader

Upvotes: 0

Related Questions