<p dir="auto">Hi!</p>
<p dir="auto">I'm (eventually) attempting to build a PostCSS/cssnext setup on top of Next.js, but somehow importing a CSS file cannot be resolved.</p>
<p dir="auto">My <code class="notranslate">pages/index.js</code> file tries to import the <code class="notranslate">pages/index.css</code> file (that exists):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import './index.css'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">'./index.css'</span></pre></div>
<p dir="auto">With the Webpack config:</p>
<p dir="auto"><strong>next.config.js:</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.css$/,
      exclude: /node_modules/,
      loader: ['style-loader', 'css-loader']
    });
    return config;
  }
};"><pre class="notranslate"><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-kos">{</span>
  <span class="pl-en">webpack</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
      <span class="pl-c1">exclude</span>: <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span><span class="pl-kos">,</span>
      <span class="pl-c1">loader</span>: <span class="pl-kos">[</span><span class="pl-s">'style-loader'</span><span class="pl-kos">,</span> <span class="pl-s">'css-loader'</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">config</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">results in</p>
<p dir="auto"><strong>output:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="yarn run v0.15.1
$ next
&gt; Using &quot;webpack&quot; config function defined in next.config.js.
 DONE  Compiled successfully in 3004ms

&gt; Ready on http://localhost:3000
{ Error: Cannot find module './index.css'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (/Users/kpuputti/code/projects/nextlatest/pages/index.js?entry:3:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }"><pre class="notranslate"><code class="notranslate">yarn run v0.15.1
$ next
&gt; Using "webpack" config function defined in next.config.js.
 DONE  Compiled successfully in 3004ms

&gt; Ready on http://localhost:3000
{ Error: Cannot find module './index.css'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.&lt;anonymous&gt; (/Users/kpuputti/code/projects/nextlatest/pages/index.js?entry:3:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }
</code></pre></div>
<p dir="auto">Package versions in <code class="notranslate">package.json</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;dependencies&quot;: {
    &quot;css-loader&quot;: &quot;^0.26.1&quot;,
    &quot;next&quot;: &quot;2.0.0-beta.12&quot;,
    &quot;style-loader&quot;: &quot;^0.13.1&quot;
  }"><pre class="notranslate"><code class="notranslate">  "dependencies": {
    "css-loader": "^0.26.1",
    "next": "2.0.0-beta.12",
    "style-loader": "^0.13.1"
  }
</code></pre></div>
<p dir="auto">Do I need to do some extra setup to get the resolving work, or how should I approach this? Thanks!</p>
<p dir="auto">Sometimes it's nice to break out your CSS into a separate <code class="notranslate">.css</code> file. I've tried to do the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pages/
└── index
    ├── index.css
    ├── index.js
    └── component.js"><pre class="notranslate"><code class="notranslate">pages/
└── index
    ├── index.css
    ├── index.js
    └── component.js
</code></pre></div>
<p dir="auto">Then in the index.js, I've tried to do:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import css from './index.css'"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s1">css</span> <span class="pl-k">from</span> <span class="pl-s">'./index.css'</span></pre></div>
<p dir="auto">And in next.config.js:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  webpack: function (config) {
    config.module.loaders = (config.module.loaders || []).concat({
      test: /\.css$/, loader: 'raw'
    })
    return config
  }
}"><pre class="notranslate"><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-kos">{</span>
  <span class="pl-en">webpack</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">loaders</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">loaders</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">concat</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">loader</span>: <span class="pl-s">'raw'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-k">return</span> <span class="pl-s1">config</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">But unfortunately, it keeps giving me:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* ./index.css"><pre class="notranslate"><code class="notranslate"> ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* ./index.css
</code></pre></div>
<p dir="auto">Seems like it's not resolving to the right place for some reason, the local <code class="notranslate">component.js</code> works though via <code class="notranslate">import component from './component.js'</code>, so I'm not sure what's going on here.</p>