Resolve url in node_modules

[kennethaasan]

Hi, I'm having trouble getting this package working with this setup:

project/webpack/dev.webpack.conf.js

{
    test: /\.scss$/,
    loaders: [
        'style',
        'css',
        'autoprefixer',
        'resolve-url'
        'sass?sourceMap'
    ]
}

project/src/entries/app/app.js

require('./app.scss');
...

project/src/entries/app/app.scss

@import "~another-project/assets/variables";
@import "../../assets/style";

project/node_modules/another-project/assets/variables.scss

$background: url("./images/background.jpg") repeat fixed 0 0 / cover !default;

project/node_modules/another-project/assets/images/background.jpg

Webpack looks for the "background.jpg" file in "project/src/entries/app/" and not in "project/node_modules/another-project/assets/". To make it work I have to write this in "project/node_modules/another-project/assets/variables.scss":

$background: url("~another-project/assets/images/background.jpg") repeat fixed 0 0 / cover !default;

[bholloway]

@kennethaa I'm suspect this is a limitation of the loader.

We are processing the css that comes out of SASS so we are heavily reliant on the SASS source-map.

The only thing I do not see is your final scss statement that consumes $background. This statement will generate css so it will have source-map entries. I suspect it is something like:

scss background: $background;

gives css background: url("~another-project/assets/images/background.jpg") repeat fixed 0 0 / cover !default;

For what you want to work the right side of the statement would need to resolve any preceding assignments to $background. And I would doubt that it does so. This could be confirmed using a source map visualiser on your css but would may want to simplify your test-case.

Is there any chance that you could change the variable to a mixin? I suspect that this would give better results.

[kennethaasan]

Alright, thanks for the input.

Ended up with creating a function:

@function asset($asset) {
    @return "~another-project/assets/#{$asset}";
}

$background: rgba(0, 0, 0, 1) url(asset("images/background.jpg")) repeat fixed 0 0 / cover !default;