Webpack: resolve.root for css/less @imports

[abergs]

I have setup a resolve.root = "app/assets/.
In some other nested folders i have a someScript.js file containing:

require('common.less');    //this resolves with resolve.root.
require('./someStyles.less');

That Works.
Instead of requiring the common.less inside the someScript.js I really want to @import it inside the someStyles.less:

@import('common.less')
color: @primaryColor //from common.less. Not possible without @import

This gives me the "Module build failed: Error: Cannot resolve file or directory" error.

[sokra]

CSS doesn't have a understanding of "modules" and "folders containing modules" so a normal @import resolves relative to the current directory.

CSS has a syntax for server-relative urls @import '/style.css'. By default this renders as is and is not resolved by webpack, but you can also pass a path as root query param (css-loader?root=/path/to/server/root) to let webpack handle these too.

We added a special syntax for resolving references like in require(..). @import '~module/style.css' resolves like require("module/style.css"). So you can use @import '~common.css' to let it look into your resolve.root.

The less-loader should handle it the same way...

See READMEs in these projects:

https://github.com/webpack/css-loader
https://github.com/webpack/less-loader

[abergs]

Thanks, it worked! Your comment was very descriptive, I can do a PR to the readme's / docs of webpack and the loaders, because I did read the readme's before the issue and I couldn't figure it out.

Thanks!
:+1:

[jhnns]

:+1: for improving the docs