title: Adding CSS to React SSR Components
body: <p>I am trying to add CSS to my component built in React using SSR, but I am unable to do so.</p>
  
  <p>Things I've looked at:</p>
  
  <ul>
  <li><a href="https://www.npmjs.com/package/isomorphic-style-loader" rel="nofollow noreferrer">https://www.npmjs.com/package/isomorphic-style-loader</a></li>
  <li><a href="https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22" rel="nofollow noreferrer">https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22</a></li>
  <li>webpack loaders</li>
  </ul>
  
  <p>But in none the process is simple or clearly mentioned. The one which I tried a lot was isomorphic loader which seemed promising, but then it gave some vague errors after setting it in my CSS files:</p>
  
  <blockquote>
    <p>Unexpected token (1:0) You may need an appropriate loader to handle this file type.</p>
  </blockquote>
  
  <p>This is my boilerplate package - <a href="https://github.com/alexnm/react-ssr" rel="nofollow noreferrer">https://github.com/alexnm/react-ssr</a></p>
  
  <p>How do I add styles to my React SSR code. </p>
  
  <p><strong>Update</strong></p>
  
  <pre><code>const dev = process.env.NODE_ENV !== "production";
  const path = require( "path" );
  const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" );
  const FriendlyErrorsWebpackPlugin = require( "friendly-errors-webpack-plugin" );
  
  const plugins = [
      new FriendlyErrorsWebpackPlugin(),
  ];
  
  if ( !dev ) {
      plugins.push( new BundleAnalyzerPlugin( {
          analyzerMode: "static",
          reportFilename: "webpack-report.html",
          openAnalyzer: false,
      } ) );
  }
  
  module.exports = {
      mode: dev ? "development" : "production",
      context: path.join( __dirname, "src" ),
      devtool: dev ? "none" : "source-map",
      entry: {
          app: "./client.js",
      },
      resolve: {
          modules: [
              path.resolve( "./src" ),
              "node_modules",
          ],
      },
      module: {
          rules: [
              {
                  test: /\.jsx?$/,
                  exclude: /(node_modules|bower_components)/,
                  loader: "babel-loader",
              },
          ],
      },
      output: {
          path: path.resolve( __dirname, "dist" ),
          filename: "[name].bundle.js",
      },
      plugins,
  };
  </code></pre>