Relative urls in SASS imported files

[ghost]

Hi. As far i can see while playing with this loader relative urls work only with main file. Is any possibility to use relative paths in imported files?

[bholloway]

Should definitely work with imported files unless there is a regression.

Needs the sass source map though.

Can post your webpack config? Or better yet is your project open source?

[ghost]

I created simple test case to understand behaviour of matching/searching urls.

If url is matched immediately, file loader is able to handle urls then. If I try to resolve urls which can be found only within root directory, file can't be recognized by loader.

Am I missing something? Are there any differences between putting sass file and url asset on both out and inside of a root directory? I'll appreciate any hints.

[bholloway]

Try omitting the root option on the loader.

Have cloned your project but can't look at it for a couple of hours.

[bholloway]

Side note. You need to list babel-loader and gulp-util in your package.json.

[bholloway]

Got an error free build by omitting the root option on resolve-url-loader.

(edit) And you also need the following test for fonts:

{
  test: /\.(woff2?|ttf|eot|svg)([#?].*)?$/,
  loader: 'file'
}

Please try that and let me know where that puts you.

Note that the root is non-inclusive. Omitting it implies your project directory which is fine for your application. The only time it should be needed is for some obscure use cases where you are referencing assets across projects.

[ghost]

Yep i forgot -D flag on some dependencies :) I added root path option on purpose only to check whether assets outside of that path are still reachable by resolver and it seemed at first sight that it's not.

But your regex makes it works, sorry for confusion and thanks for explanation.

[bholloway]

Hey no problem @clixr. Glad to help. Coincidentally I had to use the same RegExp for the first time today on a different project.