<p dir="auto">I am trying to</p>
<p dir="auto"><code class="notranslate">import 'bootstrap/dist/css/bootstrap.min.css';</code></p>
<p dir="auto">in my next.js project but I get following error</p>
<p dir="auto"><code class="notranslate">Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file</code></p>
<p dir="auto">I have <code class="notranslate">next.config.js</code> file in root directory of project. It has this configuration</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// next.config.js 
const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
});"><pre class="notranslate"><span class="pl-c">// next.config.js </span>
<span class="pl-k">const</span> <span class="pl-s1">withCSS</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@zeit/next-css'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">withCSS</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">cssLoaderOptions</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">url</span>: <span class="pl-c1">false</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I followed <a href="https://github.com/zeit/next.js/issues/299#issuecomment-474722259" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/299/hovercard">this comment</a> which  apparentlyworks but not for me. Any ideas why?</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Importing a stylesheet from a package is not possible in a page, because next throws with this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Global CSS cannot be imported from files other than your Custom &lt;App&gt;. Please move all global CSS imports to pages/_app.tsx.
Read more: https://err.sh/next.js/css-global"><pre class="notranslate"><code class="notranslate">Global CSS cannot be imported from files other than your Custom &lt;App&gt;. Please move all global CSS imports to pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
</code></pre></div>
<p dir="auto">While I understand where this stems from, it makes code-splitting impossible. If I import a component from a component library, I need to import the CSS as well. There might be libraries that don't correctly scope their selectors, but that shouldn't stop me from overwriting this warning. CSS that is imported from a library isn't inherently "global".</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li><code class="notranslate">import "my-library/index.css"</code></li>
<li><code class="notranslate">yarn dev</code></li>
<li>I get the error from above</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The file should be imported.</p>
<p dir="auto">I see these possible solutions:</p>
<ul dir="auto">
<li>Global flag in <code class="notranslate">next.config.js</code></li>
<li>Comment annotation on import</li>
<li>Warn instead of completely blocking it</li>
<li>Check if the CSS only contains scoped selectors</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">There have been previous discussions about this.</p>
<h3 dir="auto">From the <a href="https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets" rel="nofollow">blog</a></h3>
<blockquote>
<p dir="auto">Since stylesheets are global by nature, they must be imported in the Custom  component. This is necessary to avoid class name and ordering conflicts for global styles.</p>
</blockquote>
<p dir="auto">I disagree with this statement, the reasoning being that an external library can use CSS modules and package them as a CSS file to import. Which is perfectly valid and common practice and <em>does not have side effects</em>.</p>
<h3 dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="548628209" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/10059" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/10059/hovercard" href="https://github.com/vercel/next.js/issues/10059">#10059</a></h3>
<p dir="auto">This issue got closed because the global import in <code class="notranslate">_app</code> is the correct choice there.<br>
This <a href="https://github.com/zeit/next.js/issues/10059#issuecomment-607444285" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/10059/hovercard">comment</a>  describes the exact problem, but there hasn't been any response, as the issue is closed. The comment got a lot of positive reactions though, so I suppose I'm not the only one with this problem.</p>
<h3 dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="579347940" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/10975" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/10975/hovercard" href="https://github.com/vercel/next.js/issues/10975">#10975</a></h3>
<p dir="auto">Seems to be unrelated.</p>
<h3 dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="542414502" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/9830" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/9830/hovercard" href="https://github.com/vercel/next.js/issues/9830">#9830</a></h3>
<p dir="auto">Might be related, but I'm not sure.</p>
<h2 dir="auto">My use case</h2>
<p dir="auto">I write long articles with a lot of custom artwork and interactive illustrations. Articles use private npm packages with react components that render SVG with quite a bit of CSS. These packages use CSS modules and export an <code class="notranslate">index.js</code> and <code class="notranslate">index.css</code>. Adding all the CSS files to <code class="notranslate">_app</code> causes all the CSS to be loaded, even if people are on the home page, the contact form, or any other article, even though it's 100% unused. It also goes against having the file system take care of your pages because almost every page corresponds to a CSS import in <code class="notranslate">_app</code>.</p>