Disabling Style Injection with Webpack

This is a quick guide to opting-out of the automatic stylesheet injection that happens as a side effect of importing @patternfly/react-core components in your UI.

The Problem: Too many styles to wade through in dev mode

The Solution: Disable Patternfly React Auto Style Injection

Note: null-loader has been deprecated, with the suggestion to instead set resolve.alias.package to false to inform webpack to ignore a package.

---

It's actually quite simple. What you need to do is install/configure null-loader in your webpack config and then manually import the individual patternfly stylesheets you want. Let's do it step by step.

1. Install null-loader

yarn add null-loader --dev

2. Configure null-loader to discard only patternfly react styles by adding the following module rule to webpack.common.js

{
  test: /\.css$/,
  include: stylesheet => stylesheet.includes('@patternfly/react-styles/css/'),
  use: ["null-loader"]
}

At this point, your pf react components will look "broken" because we've disabled all of those styles, we need to add them back manually.

3. Install patternfly "core", the CSS offering.

yarn add @patternfly/patternfly

4. Import the individual stylesheets for all the components, utilities, and layouts you may be using.

import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly/patternfly-addons.css';
import '@patternfly/patternfly/components/Alert/alert.css';
import '@patternfly/patternfly/components/Page/page.css';
import '@patternfly/patternfly/components/Backdrop/backdrop.css';
import '@patternfly/patternfly/layouts/Bullseye/bullseye.css';
import '@patternfly/patternfly/layouts/Grid/grid.css';
import '@patternfly/patternfly/components/Button/button.css';
import '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.css';
import '@patternfly/patternfly/components/Toolbar/toolbar.css';
import '@patternfly/patternfly/components/DataList/data-list.css';
// etc.

With all of this in place, the development experience is improved as you'll only see stylesheets that you've explicitly imported into your app, and the source order of those stylesheets is much less likely to change as a result of unrelated refactorings to your JS module architecture.