relative filepaths breaking

[davidjbradshaw]

I'm trying to use the postcss-inline-svg plugin via the postcss-loader in webpack to inline an SVG file with the following line of code.

@svg-load atol url(images/abta.svg);

However, it only works if I put the full path from the root of my machine, for example.

@svg-load atol url(/Users/dave/dev/mobile/src/components/Footer/images/abta.svg);

Any attempt to use a relative path, leads to the following error message.

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./~/stylelint-loader!./src/components/Footer/Footer.scss
Module build failed: Error: ENOENT: no such file or directory, stat '/Users/dave/dev/mobile/node_modules/sass-loader/index.js?sourceMap!/Users/dave/dev/mobile/node_modules/stylelint-loader/index.js!/Users/dave/dev/mobile/src/components/Footer/images/abta.svg'
    at Error (native)
 @ ./src/components/Footer/Footer.scss 4:14-320 13:2-17:4 14:20-326 

This error message says the file is not found at the location that the file is in my project! As I mentioned above copying the full file path from the error into my scss file fixes the problem, but clearly that is not a solution.

I've tried adding postcss-import and adding '.' to the path, but that had no effect.

Not sure if this is a bug or config issue. So please excuse if I'm being dumb.

[ai]

Can you debug what file variable value was here: https://github.com/postcss/postcss-loader/blob/master/index.js#L7

[davidjbradshaw]

Thanks for taking a look. This is the value of the file var when I get the error.

/Users/dave/dev/mobile/node_modules/sass-loader/index.js?sourceMap!/Users/dave/dev/mobile/node_modules/stylelint-loader/index.js!/Users/dave/dev/mobile/src/components/Footer/Footer.scss

[ai]

Hm. Seems like we need to use different way to get file path.

@davidjbradshaw because this issue is reproduced only for you, can you try some methods locally? Or add new test?

[davidjbradshaw]

Happy to try something locally.

Not sure I have a deep enough understanding of webpack and postcss to write a test case.

[ai]

@davidjbradshaw don’t worry, I am not a weback user at all, but developing this module :D.

[ai]

Main problem is really big webpack API complexity. Taking a file name is a common procedure for loader, but I can’t find good way to do it :(.

[ai]

@davidjbradshaw can you debug what will be in this.resourcePath in loader context?

[davidjbradshaw]

Can you point me at where the break point should be for that?

[ai]

@davidjbradshaw same line 7

[davidjbradshaw]

Sorry for the slow reply. This is what I get for this.resourcePath.

/Users/dave/dev/mobile/src/components/Footer/Footer.scss

[ai]

Awesome. I will replace a way to get current file path. Sorry, new release could be released only in Sunday (I am traveling between cities).

[davidjbradshaw]

Thanks and next week is fantastic.

[ai]

Done 3c9b715

[ai]

Released in 0.8.1.

[Grawl]

still have the same problem using symfony/webpack-encore and postcss-inline-svg