Import our application CSS as the very last thing, so that it can
properly override PatternFly variables. Before, our application CSS
could land in the first third of dist/index.css *before* PatternFly's
definitions, so that the latter overrode the former [1].
This is a long-standing bug in mini-css-extract-plugin ([2] and
countless things that point to it) with `NODE_ENV=production` builds.
As a workaround, make sure that app.scss is the absolutely last imported
CSS, instead of "almost last". It is still conceptually correct for the
application CSS to be able to override patternfly-4-overrides.scss.
Closes#362
[1] https://github.com/martinpitt/performance-graphs/issues/10
[2] https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188
* Stop importing cockpit's base1/patternfly.css
This is deprecated API and will be dropped at some point, in favor
of projects shipping their own CSS.
Install and import the styles from PF4 now.
* Use webpack based string replacement for removing the font-face rules from PF4
Doing the seddery in Makefile breaks `npm run build`, webpack watching,
and is generally brittle.
Do the font replacement hacking with `string-replace-loader`, which fits into webpack much more nicely.
There is still some potential simplification by not duplicating the
entire scss loader chain.
Co-authored-by: Martin Pitt <[email protected]>
Closes#315
