title: CSS Style not being picked up when deployed in netlify
body: <p>I have created a create-react-app and trying to deploy it using Netlify for the first time (sample is <a href="https://cocky-fermat-241cbc.netlify.com/" rel="nofollow noreferrer">here</a>). However, when deployment is complete, the site looks different than it does locally. For example, my grid layout does not work properly. </p>
  
  <p>I can see that the styles are being packaged differently than they are locally. Netlify is creating some <code>/static/css/*.chunk.css</code> files which does indeed contain my styles. When deployed locally, the styles are simply added in the <code>&lt;head&gt;</code> tag of the parent document as <code>&lt;style type="text/css"&gt;</code> </p>
  
  <p>I have tried turning off asset optimization in Netlify. I have also tried renaming my CSS classes, and even included it directly on the index.js file of the create-react-app project. Nothing seems to make a difference.</p>
  
  <p>Here is my <code>package.json</code></p>
  
  <pre><code>{
    "name": "knowledge-repo",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:3001/",
    "dependencies": {
      "@toast-ui/react-editor": "^1.0.0",
      "array-move": "^2.1.0",
      "mongoose": "^5.5.13",
      "react": "^16.8.6",
      "react-ace": "^6.5.0",
      "react-codemirror": "^1.0.0",
      "react-dom": "^16.8.6",
      "react-scripts": "2.1.8",
      "react-sortable-hoc": "^1.9.1",
      "semantic-ui": "^2.4.2",
      "semantic-ui-react": "^0.86.0"
    },
    "scripts": {
      "start": "run-p start:**",
      "start:app": "react-scripts start",
      "start:lambda": "netlify-lambda serve src/lambda",
      "build": "run-p build:**",
      "build:app": "react-scripts build",
      "build:lambda": "netlify-lambda build src/lambda",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "dotenv": "^8.0.0",
      "http-proxy-middleware": "^0.19.1",
      "netlify-lambda": "^1.4.13",
      "npm-run-all": "^4.1.5"
    }
  }
  </code></pre>
  
  <p>Here is the component that is using the <code>*.css</code> </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import KnowledgeSubjectBrowser from './KnowledgeSubjectBrowser';
  import KnowledgeRepoHeader from './KnowledgeRepoHeader';
  import KnowledgeRepoSidebar from './KnowledgeRepoSidebar';
  import styles from './KnowledgeRepo.css'
  
  class KnowledgeRepo extends React.Component {
  
      render(){
          return (
        &lt;div className={styles.krcontainer}&gt;
          &lt;header&gt;
            &lt;KnowledgeRepoHeader /&gt;
          &lt;/header&gt;
          &lt;nav&gt;
            &lt;KnowledgeRepoSidebar /&gt;
          &lt;/nav&gt;
          &lt;main&gt;
            &lt;KnowledgeSubjectBrowser /&gt;
          &lt;/main&gt;
        &lt;/div&gt;
          )
      }
  }
  
  export default KnowledgeRepo;
  </code></pre>
  
  <p>The css file as follows:</p>
  
  <pre class="lang-css prettyprint-override"><code>:local(.krcontainer) {
    display: grid;
  
    grid-template-areas:
      "header header header"
      "nav content side";
  
    grid-template-columns: 100px 1fr 200px;
    grid-template-rows: auto 1fr;
    grid-gap: 0px;
  
    height: 100vh;
  
  }
  
  header {
    grid-area: header;
    background: black;
  }
  
  nav {
    padding: 30px 5px 20px 5px;
    grid-area: nav;
    background: black;
  }
  
  main {
    grid-area: content;
  }
  </code></pre>