CODEWITHSUNDEEP
cssangularwebpack
Opsse
Opsse

Reputation: 1911

Add a CSS framework to Angular vendor bundle

Here is my situation :

Here is my issue :

Adding Semantic UI to webpack has no effect.

Here is what I tried :

(I followed the official Angular documentation for webpack)

Add semantic-ui to package.json from terminal

npm install semantic-ui-css --save

Add vendor bundle to the entry property in webpack.common.js 

[...]
entry: {

  'polyfills': './src/polyfills.browser.ts',
  'main':      AOT ? './src/main.browser.aot.ts' :
              './src/main.browser.ts',
  'vendor':   './src/vendor.ts'

},
[...]

Create the src/vendor.ts file and set its content to :

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

// My CSS framework
import 'semantic-ui-css';

What I got :

Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor

And webpack inject the bundle script in the HTML page : 

<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>

But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.

I probably miss something, what is it ?

Upvotes: 0

Views: 628

Answers (1)

Somnath Sinha
Somnath Sinha

Reputation: 672

Below statement only imports semantic.js as package.json is pointing to that file.

import 'semantic-ui-css';

To import CSS, you can add the below:

// To import CSS
import 'semantic-ui-css/semantic.css';

OR in src/styles/styles.scss

@import '../../node_modules/semantic-ui-css/semantic.css';

Upvotes: 1

Related Questions