Ensure application CSS has priority over library CSS
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
This commit is contained in:
parent
cfced19000
commit
080b20af94
2 changed files with 1 additions and 1 deletions
|
|
@ -20,7 +20,6 @@
|
||||||
import cockpit from 'cockpit';
|
import cockpit from 'cockpit';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
|
import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
|
||||||
import './app.scss';
|
|
||||||
|
|
||||||
const _ = cockpit.gettext;
|
const _ = cockpit.gettext;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@ import { Application } from './app.jsx';
|
||||||
* the overrides will be correctly in the end of our stylesheet.
|
* the overrides will be correctly in the end of our stylesheet.
|
||||||
*/
|
*/
|
||||||
import "./lib/patternfly/patternfly-4-overrides.scss";
|
import "./lib/patternfly/patternfly-4-overrides.scss";
|
||||||
|
import './app.scss';
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
ReactDOM.render(React.createElement(Application, {}), document.getElementById('app'));
|
ReactDOM.render(React.createElement(Application, {}), document.getElementById('app'));
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue