title: Unable to import css files into NextJs project
body: <p>Currently I have my index.js file that has my display components. For CSS I have downloaded a css file from an <a href="https://bootswatch.com/" rel="nofollow noreferrer">external source</a>. I am then adding the .css file into my styles folder that comes when you make the initial <code>npx create-next-app</code>. This file I'm then trying to import into my index.js file like so: <code>import bootStyles from &quot;../styles/bootstrap.css&quot;</code>. But doing this gives me this error:</p>
  <blockquote>
  <p>error - ./styles/bootstrap.css Global CSS cannot be imported from
  files other than your Custom . Please move all global CSS imports
  to pages_app.js. Or convert  the import to Component-Level CSS (CSS
  Modules). Read more: https://nextjs.org/docs/messages/css-global
  Location: pages\index.js</p>
  </blockquote>
  <p>Additionally I have also tried using the Head component like so:</p>
  <pre><code>import Head from 'next/head'
  
  &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;../styles/bootstrap.css&quot;/&gt;
  &lt;/Head&gt;
  </code></pre>
  <p>This doesnt show an error but the styles still dont reflect on my webpage.</p>