You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 27, 2017. It is now read-only.
We are currently using Angular 2, Webpack 2, and are interested in using Bootstrap 4. At the moment, it appears that PatternFly does not use Bootstrap 4, rather is still using Bootstrap 3.x. In addition, we cannot use angular-patternfly since it has not been adapted for use with Angular 2. As such, we are having to resort to using ngBootstrap, since it uses Bootstrap 4 and was made for use with Angular 2. We will only be using some of the PatternFly CSS for the purposes of branding until it is natively compatible with Bootstrap 4 (for CSS) and Angular 2 (for JS).
CSS Issue
Loading the PatternFly CSS has been a bit troublesome, as Webpack's LESS loader has a bug with respecting relative paths (the transpiled CSS is also not valid CSS), and a Sass file is not offered. Because the transpiled CSS is not valid CSS (it has LESS symbols), it is likely an npm build issue, so for now we will simply have to reference it via a CDN in one of our own Sass files. I have also looked at patternfly-sass to be able to at least use PatternFly's Sass files, however, npm is not installing it to the project properly as a GitHub repo with a trackable version using a tag, and, unfortunately, it is not available on npm.
We realize that we are on the bleeding edge here and will run into some challenges, but this will allow for easier maintainability into the near future, as contributors will not have to upgrade from one major version to the next. There are many moving components in terms of technology, so we want to keep up with the technologies that would result in the biggest changes when/if requiring an upgrade. In this case, that means Webpack 2, Angular 2, and Bootstrap 4.
We are currently using Angular 2, Webpack 2, and are interested in using Bootstrap 4. At the moment, it appears that PatternFly does not use Bootstrap 4, rather is still using Bootstrap 3.x. In addition, we cannot use angular-patternfly since it has not been adapted for use with Angular 2. As such, we are having to resort to using ngBootstrap, since it uses Bootstrap 4 and was made for use with Angular 2. We will only be using some of the PatternFly CSS for the purposes of branding until it is natively compatible with Bootstrap 4 (for CSS) and Angular 2 (for JS).
CSS Issue
Loading the PatternFly CSS has been a bit troublesome, as Webpack's LESS loader has a bug with respecting relative paths (the transpiled CSS is also not valid CSS), and a Sass file is not offered. Because the transpiled CSS is not valid CSS (it has LESS symbols), it is likely an npm build issue, so for now we will simply have to reference it via a CDN in one of our own Sass files. I have also looked at patternfly-sass to be able to at least use PatternFly's Sass files, however, npm is not installing it to the project properly as a GitHub repo with a trackable version using a tag, and, unfortunately, it is not available on npm.
I've been in touch with the PatternFly team regarding the inability to load CSS or LESS properly from the main
patternfly
npm package using Webpack (due to that bug with Webpack'sless-loader
here: webpack-contrib/less-loader#76). Please see relevant issues here: patternfly/patternfly#458, patternfly/patternfly-demo-app#10We realize that we are on the bleeding edge here and will run into some challenges, but this will allow for easier maintainability into the near future, as contributors will not have to upgrade from one major version to the next. There are many moving components in terms of technology, so we want to keep up with the technologies that would result in the biggest changes when/if requiring an upgrade. In this case, that means Webpack 2, Angular 2, and Bootstrap 4.
Integrate PatternFly: JavaScript (#8)
The text was updated successfully, but these errors were encountered: