How to add css to index.html

[abdulhaq-e]

How should one utilise the following code found in index.html

  {% for (var css in o.htmlWebpackPlugin.files.css) { %}
  <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
  {% } %}

I want to do that in order to include semantic.min.css. Please do suggest if there is a better way to it.

[manavsehgal]

Including UI frameworks like Semantic UI is not as straightforward because you need to take care of UI components that require JS and include these appropriately as Webpack modules.

Possible solutions... I will write a Wiki once I have something to demo.

1. You may want to checkout Wiki written for including Bootstrap 4 for ideas.
2. You may want to use CSS only version of semantic UI and include it straight within the index.html
3. Use Sass Loader with Semantic UI Scss version to include specific components as required. Like so. The AngularPages demo has app level Scss theme, and component level Sass styling integration.

---

Consolidating UI related issues in #199.

[ghillert]

You may also want to checkout: https://github.com/ghillert/angular2-webpack-starter-bootstrap

I customized the starter slightly to add Bootstrap 3 (with JQuery) and Less support.

[yannvr]

I have added CSS support (the webpack way) in a PR #338.
As long as you include your CSS using require in your components / directives. They will all be picked and minified automatically in your index.html.