cannot resolve url(..) in imported files

[breezewish]

├── node_modules
├── src
│   ├── Entry.js
│   ├── Entry.styl
│   └── misc
│       ├── background.jpg
│       └── test.styl
└── webpack.config.js

src/Entry.js

import './Entry.styl';

src/Entry.styl

@import './misc/test.styl';

src/misc/test.styl

body
  background: url('./background.jpg')

Produce error

$ webpack
Hash: 703b4e12af9bbb47f85e
Version: webpack 1.12.13
Time: 989ms
 Asset     Size  Chunks             Chunk Names
app.js  3.45 kB       0  [emitted]  main
   [0] ./src/Entry.js 25 bytes {0} [built]
    + 2 hidden modules

ERROR in ./src/Entry.styl
Module not found: Error: Cannot resolve 'file' or 'directory' ./background.jpg in /private/tmp/project/src
 @ ./src/Entry.styl 6:56-83

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var root = function (fn) {
  return path.resolve(__dirname, fn);
};

var config = {
  entry: root('src/Entry.js'),
  output: {
    path: root('dist/'),
    filename: 'app.js'
  },
  resolve: {
    root: [root('node_modules'), root('src')],
    extensions: ['', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.(png|jpg)$/,
        loader: 'file'
      },
      {
        test: /\.styl$/,
        loader: 'css!stylus'
      },
    ]
  }
};

module.exports = config;

any ideas?

[oscar-g]

I was having a similar problem, only with bootstrap-styl.

I ended up doing this in my app's theme.scss:

$icon-font-path = '~bootstrap-styl/fonts/';
@import '~bootstrap-styl/bootstrap';

My webpack.module.loader looks like this:
style-loader?css-loader?sourceMap&importLoaders=1!stylus-loader?paths=node_modules/bootstrap-styl/

Maybe you can add src/misc to the paths param in stylus-loader?

[codetony25]

Change your loader for "styl" to loaders: ['style', 'css', 'stylus', 'resolve url']

[vass-david]

This solved my issue. Just change your loaders to:

loader: 'style!css!stylus?resolve url'

This should resolve relative urls in imported styles.

[breezewish]

close: resolve url works