title: CSS Modules export CSSes as <style> tag in head tag with disabled sourceMap
body: <p>I'm writing a <code>React</code>, <code>Server Side Rendering</code>, <code>Router4</code>, <code>Helmet</code>, <code>CSS Modules</code> boilerplate, everything is awesome but one thing hurts my soul:</p>
  
  <p>At first see my <code>webpack.production.config.js</code>:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const StatsPlugin = require('stats-webpack-plugin');
  const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
  const distDir = path.join(__dirname, 'dist');
  const srcDir = path.join(__dirname);
  
  module.exports = [
      {
          name: 'client',
          target: 'web',
          entry: `${srcDir}/client.jsx`,
          output: {
              path: distDir,
              filename: 'client.js',
              publicPath: distDir,
          },
          resolve: {
              extensions: ['.js', '.jsx']
          },
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /(node_modules\/)/,
                      use: [
                          {
                              loader: 'babel-loader',
                          }
                      ]
                  },
                  {
                      test: /\.scss$/,
                      use: [
                          {
                              loader: 'style-loader',
                          },
                          {
                              loader: 'css-loader',
                              options: {
                                  modules: true,
                                  importLoaders: 1,
                                  localIdentName: '[hash:base64:10]',
                                  sourceMap: false,
                              }
                          },
                          {
                              loader: 'sass-loader'
                          }
                      ]
                  }
              ],
          },
          plugins: [
              new webpack.DefinePlugin({
                  'process.env': {
                      NODE_ENV: '"production"'
                  }
              }),
              new CleanWebpackPlugin(distDir),
              new webpack.optimize.UglifyJsPlugin({
                  compress: {
                      warnings: false,
                      screw_ie8: true,
                      drop_console: true,
                      drop_debugger: true
                  }
              }),
              new webpack.optimize.OccurrenceOrderPlugin(),
          ]
      },
      {
          name: 'server',
          target: 'node',
          entry: `${srcDir}/server.jsx`,
          output: {
              path: distDir,
              filename: 'server.js',
              libraryTarget: 'commonjs2',
              publicPath: distDir,
          },
          resolve: {
              extensions: ['.js', '.jsx']
          },
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /(node_modules\/)/,
                      use: [
                          {
                              loader: 'babel-loader',
                          }
                      ]
                  },
                  {
                      test: /\.scss$/,
                      use: ExtractTextPlugin.extract({
                          fallback: "isomorphic-style-loader",
                          use: [
                              {
                                  loader: 'css-loader',
                                  options: {
                                      modules: true,
                                      importLoaders: 1,
                                      localIdentName: '[hash:base64:10]',
                                      sourceMap: false
                                  }
                              },
                              {
                                  loader: 'sass-loader'
                              }
                          ]
                      })
                  }
              ],
          },
          plugins: [
              new ExtractTextPlugin({
                  filename: 'styles.css',
                  allChunks: true
              }),
              new OptimizeCssAssetsPlugin({
                  cssProcessorOptions: { discardComments: { removeAll: true } }
              }),
              new StatsPlugin('stats.json', {
                  chunkModules: true,
                  modules: true,
                  chunks: true,
                  exclude: [/node_modules[\\\/]react/],
              }),
          ]
      }
  ];
  </code></pre>
  
  <p>And this is my <code>template.js</code> file that server use this for building basic <code>HTML</code>:</p>
  
  <pre><code>export default ({ markup, helmet }) =&gt; {
      return `&lt;!DOCTYPE html&gt;
              &lt;html ${helmet.htmlAttributes.toString()}&gt;
                  &lt;head&gt;
                      ${helmet.title.toString()}
                      ${helmet.meta.toString()}
                      ${helmet.link.toString()}
                  &lt;/head&gt;
                  &lt;body ${helmet.bodyAttributes.toString()}&gt;
                      &lt;div id="root"&gt;${markup}&lt;/div&gt;
                      &lt;script src="/dist/client.js" async&gt;&lt;/script&gt;
                  &lt;/body&gt;
              &lt;/html&gt;`;
  };
  </code></pre>
  
  <p>Just like I write, I set <code>sourceMap</code> to <code>false</code>, so all styles loaded as <code>&lt;style&gt;</code> tag inside <code>&lt;head&gt;</code> tag.</p>
  
  <p><a href="https://i.stack.imgur.com/oyeEI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oyeEI.jpg" alt="Shitty Loading CSS as style tag inside head tag because of setting sourceMaps to false"></a></p>
  
  <p>If I set the <code>soureMap</code> to <code>true</code>, the <code>&lt;link&gt;</code> tag appears inside <code>&lt;head&gt;</code> tag, Even it is not server side, and has a weird blob url for loading <code>CSS</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/2fGrk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2fGrk.jpg" alt="Results after setting sourceMaps to true"></a></p>
  
  <p>In fact I wanna server side link tag inside head tag with direct pointing to <code>styles.css</code>, how I can do it ?</p>
  
  <p>My whole project is in <a href="https://github.com/amerllica/react-server-render-example/" rel="nofollow noreferrer"><strong><code>THIS LINK</code></strong></a></p>
  
  <p>It has not very lot codes, little and simple, it is just a simple boilerplate. <em>take a look</em></p>