diff --git a/README.md b/README.md
index f4d1e764..f880195f 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ git clone https://github.com/patternfly/patternfly-react-seed
 cd patternfly-react-seed
 npm install && npm run start:dev
 ```
-## Development Scripts
+## Development scripts
 ```sh
 # Install development/build dependencies
 npm install
@@ -52,7 +52,7 @@ npm run build:storybook
 * [Jest Config](./jest.config.js)
 * [Editor Config](./.editorconfig)
 
-## Raster Image Support
+## Raster image support
 
 To use an image asset that's shipped with PatternFly core, you'll prefix the paths with "@assets". `@assets` is an alias for the PatternFly assets directory in node_modules.
 
@@ -69,7 +69,7 @@ import loader from '@app/assets/images/loader.gif';
 <img src={loader} alt="Content loading />
 ```
 
-## Vector Image Support
+## Vector image support
 Inlining SVG in the app's markup is also possible.
 
 ```js
@@ -84,7 +84,10 @@ body {
 }
 ```
 
-## Code Quality Tools
+## Adding custom CSS
+When importing CSS from a third-party package for the first time, you may encounter the error `Module parse failed: Unexpected token... You may need an appropriate loader to handle this file typ...`. You need to register the path to the stylesheet directory in [stylePaths.js](./stylePaths.js). We specify these explicity for performance reasons to avoid webpack needing to crawl through the entire node_modules directory when parsing CSS modules.
+
+## Code quality tools
 * For accessibility compliance, we use [react-axe](https://github.com/dequelabs/react-axe)
 * To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
 * To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)
diff --git a/stylePaths.js b/stylePaths.js
new file mode 100644
index 00000000..2ca7405a
--- /dev/null
+++ b/stylePaths.js
@@ -0,0 +1,14 @@
+const path = require('path');
+module.exports = {
+  stylePaths: [
+    path.resolve(__dirname, 'src'),
+    path.resolve(__dirname, 'node_modules/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+    path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+  ]
+}
diff --git a/webpack.dev.js b/webpack.dev.js
index aa15d43b..b4786ce2 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
+const { stylePaths } = require("./stylePaths");
 const HOST = process.env.HOST || "localhost";
 const PORT = process.env.PORT || "9000";
 
@@ -23,15 +24,7 @@ module.exports = merge(common('development'), {
       {
         test: /\.css$/,
         include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'node_modules/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+          ...stylePaths
         ],
         use: ["style-loader", "css-loader"]
       }
diff --git a/webpack.prod.js b/webpack.prod.js
index c1be6fbc..e625f10a 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
+const { stylePaths } = require("./stylePaths");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
@@ -25,15 +26,7 @@ module.exports = merge(common('production'), {
       {
         test: /\.css$/,
         include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'node_modules/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+          ...stylePaths
         ],
         use: [MiniCssExtractPlugin.loader, 'css-loader']
       }