title: Webpack can't fix CSS override issue and bundle <style> elements in <head>
body: <p>In my app, lets say I have two JS pages A and B, and each import a different stylesheet (<code>import '../style/&lt;A or B.css&gt;'</code>).<br>
  Both stylesheets have identical classnames but but different properties.  </p>
  
  <p>I run <code>yarn run dev ==&gt; dev: webpack-dev-server --inline --hot ==&gt; webpack -p</code>  </p>
  
  <p>This is what my html <code>&lt;head&gt;</code> looks like<br>
  <a href="https://imgur.com/a/1JVb5" rel="nofollow noreferrer">https://imgur.com/a/1JVb5</a><br>
  page A stylesheet is loaded first, then page B css style is loaded after  </p>
  
  <p>When I go to Page B, the css is correct<br>
  When I go to Page A, the css is mixed up and some class styles are overriden by page B.css.</p>
  
  <p>My project structure is like</p>
  
  <pre><code>public/
   bundle.js
   index.html
  src/
   components/
   pages/
   style/
   App.js
   index.js
   package.json
   webpack.config.js
  </code></pre>
  
  <p>my webpack.config.js is</p>
  
  <pre><code>const path = require('path');
  
  var config = {
      entry: path.resolve(__dirname, 'src', 'index.js'),
      output: {
          path: path.resolve(__dirname, 'public'),
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: path.resolve(__dirname, 'src'),
          publicPath: path.resolve(__dirname, 'public')
      },
      module: {
          rules: [
          {
              test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: [
                  { loader: 'babel-loader',
                  options: { presets: ['react','env'] } }
              ]
          },
          {
              test: /\.css$/,
              use: [
                  { loader: "style-loader?singleton", 
                    options: 
                    { singleton: true } 
                  },
                  { loader: "css-loader" }
              ]
          }
          ]
      }
  };
  module.exports = config;
  </code></pre>
  
  <p>I want Webpack to merge the multiple  elements and fix the css override issue<br>
  In Webpack, I have tried <code>style-loader?singleton</code> and <code>{ singleton: true }</code> but it didnt work.  </p>
  
  <p><strong>EDIT 1:</strong> looking into extract-text-webpack-plugin</p>
  
  <p><strong>EDIT 2:</strong> </p>
  
  <pre><code>import movieStyle from '../style/MovieDetail.css' 
  ... 
  return (
  &lt;div id="CellDetail_right" className={ movieStyle['cell-detail-right'] }&gt;...&lt;/div&gt;
  ) 
  </code></pre>
  
  <p>Ok, I added <code>options: { modules: true }</code> and it didnt work. My classNames are hyphenated and after compiling the browser renders the components WITHOUT any style or classes. 
  Div on browser looks like <code>&lt;div id="CellDetail_right"&gt;...&lt;div&gt;</code></p>