postcss-loader: [v2.1.1] breaks `resolve-url-loader`

When upgrading to 2.1.1 version of postcss-loader, file-loader and url-loader functionality is broken (e.g. using require(<file>) in JavaScript files or url(<file>) in CSS files).

The error message:

[0] WARNING in ./node_modules/css-loader??ref--3-1!./node_modules/resolve-url-loader??ref--3-2!./node_modules/postcss-loader/lib??ref--3-3!./node_modules/stylus-loader??ref--3-4!./app/App/index.styl
[0] (Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
[0]   ENOENT: no such file or directory, scandir '/Users/xxx/dev/app/App/app/App'
[0]   at Object.fs.readdirSync (fs.js:904:18)
[0]  @ ./app/App/index.styl 4:14-254
[0]  @ ./app/App/index.tsx
[0]  @ ./app/index.tsx

The problem seems to be that stylus-loader the path wrong. It should be /Users/xxx/dev/app/App (not /Users/xxx/dev/app/App/app/App).

On this case the index.styl contains:

.App
  background-image url('./foo.png')

On Webpack configuration, context is set like:

context: path.resolve(__dirname, './'),

Downgrading to postcss-loader 2.1.0 gets everything working again.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (5 by maintainers)

Most upvoted comments

After changing the order (moving postcss-loader above resolve-url-loader) gets rid of the error.

I understand the fact that many webpack loaders are buggy, but for now I haven’t been able to resolve resolve importing/requiring a Stylus file inside a Stylus file - without using resolve-url-loader. Without it, the imported Stylus files are looking url(<file>) inside the same directory where the file requiring another is.

jussikinnula on Feb 26, 2018

Move postcss-loader above resolve-url-loader

alexander-akait on Feb 26, 2018