CSS modules EVERYWHERE!

src/style.css

@@ -17,7 +17,7 @@ a {
   color: inherit;
 }
 
-ul.inline {
+ul:global(.inline) {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -28,7 +28,7 @@ ul.inline {
     white-space: nowrap;
   }
 
-  &.with-separator {
+  &:global(.with-separator) {
     & li:after {
       content: '//';
       padding: 0 0.5rem;

webpack.common.js

@@ -97,31 +97,6 @@ module.exports = {
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
-      {
-        oneOf: [
-          {
-            test: /\.css$/,
-            exclude: /components/,
-            use: ExtractTextPlugin.extract({
-              fallback: 'style-loader',
-              use: [
-                {
-                  loader: 'css-loader',
-                  options: {
-                    importLoaders: 1,
-                    minimize: true,
-                    sourceMap: true,
-                  }
-                },
-                {
-                  loader: 'postcss-loader',
-                  options: {
-                    ident: 'postcss'
-                  }
-                }
-              ]
-            })
-          },
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
@@ -145,8 +120,6 @@ module.exports = {
           ]
         })
       },
-        ]
-      },
       {
         test: /\.svg$/,
         loader: 'svg-react-loader'

webpack.prod.js

@@ -43,9 +43,12 @@ module.exports = [
         // Replace the rule for CSS files
         {
           test: /\.css$/,
-          loader: 'css-loader/locals'
+          loader: 'css-loader/locals',
+          options: {
+            modules: true
+          }
         },
-        ...common.module.rules.filter(rule => !rule.oneOf)
+        ...common.module.rules.filter(rule => !rule.test.test('file.css'))
       ]
     }
   }