My current situation :
- The website is built with Angular 4
- Started using Angular Starter Kit
- Utilizing Semantic UI as the CSS framework
The challenge I'm facing :
Integration of Semantic UI into webpack is not having any impact.
Steps I've taken so far :
(I referred to the official Angular documentation for webpack)
Added semantic-ui to package.json via terminal
npm install semantic-ui-css --save
Included a vendor bundle in the entry property of webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Created the file src/vendor.ts and included the following content :
// 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';
Results obtained :
Webpack compiled without any errors, the vendor bundle was generated :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendorAdditionally, webpack injected the bundle script into 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>
However, there was no visual change (though I should confirm this using CDN) and the vendor.bundle.js file wasn't visible in the dist directory.
It seems like I may have overlooked something, but what could it be?