title: how to deal with css imports for react server-side render
body: <p>this is quite similar to <a href="https://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components">Importing CSS files in Isomorphic React Components</a></p>
  
  <p>but the suggested solution proposed a conditional statement which checks if the import is done from the server or browser. The problem is that i use the import object in the component itself like below</p>
  
  <pre><code>&lt;a href="/auth/github" className={style.link}&gt;Sign up with github &lt;/a&gt;
  </code></pre>
  
  <p>but <code>style</code> is undefined because i dont import it on the server. The other method suggested <code>webpack-isomorphic-tools</code> which require me to bundle up the server side code as well. This approach also forces you to use webpack on the server side which i'm not keen on.</p>
  
  <p>basically this is my component</p>
  
  <pre><code>import React from 'react';
  import SignUp from './SignUp'
  import {Link} from 'react-router'
  import {connect} from 'react-redux';
  import Modal from 'react-modal'
  import style from './app.css'
  
  class App extends React.Component{
  
    componentDidMount(){
      console.log('mounted')
    }
  
    render(){
      return (
        &lt;div&gt;
          &lt;p&gt; Hello Kj&lt;/p&gt;
            &lt;a href="/auth/github" className={style.link}&gt;Sign up with github &lt;/a&gt;
            &lt;a href="/logout" className={style.logout}&gt; Logout &lt;/a&gt;
            &lt;Link to ='/project'&gt;Project&lt;/Link&gt;
            &lt;button onClick={this.openModal}&gt; Login &lt;/button&gt;
          &lt;h1&gt; {this.props.username} &lt;/h1&gt;
          &lt;h2&gt; {this.props.email} &lt;/h2&gt;
          &lt;div&gt; {this.props.children} &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>rendering from the server side throws the error</p>
  
  <pre><code> [Error] SyntaxError: /home/avernus/Desktop/projects/node-sc-react/client/app.css: Unexpected token (1:0)
  &gt; 1 | .link{
      | ^
    2 |   text-decoration: none;
    3 |   border: 1px solid black;
    4 |   background-color: blue;
      at Parser.pp.raise (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/location.js:22:13)
      at Parser.pp.unexpected (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/util.js:89:8)
      at Parser.pp.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:522:12)
      at Parser.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
      at Parser.pp.parseExprSubscripts (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:277:19)
      at Parser.pp.parseMaybeUnary (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:257:19)
      at Parser.pp.parseExprOps (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:188:19)
      at Parser.pp.parseMaybeConditional (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:165:19)
      at Parser.pp.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:128:19)
      at Parser.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/flow.js:460:20)
  </code></pre>
  
  <p>is there anyway i can deal with this issue without using webpack?</p>