<p dir="auto">I'm trying to use <a href="https://github.com/Hacker0x01/react-datepicker">react-datepicker</a> in one of my react components. When I import the <code class="notranslate">CSS</code> file like mentioned below, I get an error.</p>
<p dir="auto"><code class="notranslate">import 'react-datepicker/dist/react-datepicker.css'</code></p>
<p dir="auto">The error I get is,</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error in react-datepicker/dist/react-datepicker.css

Module parse failed: /path/to/my/project/folder/node_modules/react-datepicker/dist/react-datepicker.css 
Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .react-datepicker-popper[data-placement^=&quot;bottom&quot;] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=&quot;top&quot;] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, | .react-datepicker__month-read-view--down-arrow { | margin-left: -8px;
"><pre class="notranslate"><code class="notranslate">Error in react-datepicker/dist/react-datepicker.css

Module parse failed: /path/to/my/project/folder/node_modules/react-datepicker/dist/react-datepicker.css 
Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, | .react-datepicker__month-read-view--down-arrow { | margin-left: -8px;

</code></pre></div>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>latest</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS High Sierra</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome Version 61.0.3163.100</td>
</tr>
</tbody>
</table>
<p dir="auto">The glamor style tag is always included regardless of use of glamor. This is in <code class="notranslate">2.0.0-beta.24</code>.</p>
<p dir="auto"><code class="notranslate">&lt;style type="text/css" data-glamor=""&gt;&lt;/style&gt;</code> is present within the DOM upon rendering dev or final build.</p>
<p dir="auto">Take for example this <code class="notranslate">_document.js</code> fragment.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    return { ...page }
  }

  render () {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;title&gt;Site Title&lt;/title&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
        &lt;style jsx global&gt;{`
          html, body {
            background-color: #f00;
            font-size: 16px;
            color: #fef;
          }
          p {
            color: red;
          }
        `}&lt;/style&gt;
      &lt;/html&gt;
    )
  }
}"><pre class="notranslate"><code class="notranslate">import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps ({ renderPage }) {
    const page = renderPage()
    return { ...page }
  }

  render () {
    return (
      &lt;html&gt;
        &lt;Head&gt;
          &lt;title&gt;Site Title&lt;/title&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
        &lt;style jsx global&gt;{`
          html, body {
            background-color: #f00;
            font-size: 16px;
            color: #fef;
          }
          p {
            color: red;
          }
        `}&lt;/style&gt;
      &lt;/html&gt;
    )
  }
}
</code></pre></div>