Posted in Uncategorized

resolve.root for css/less @imports

   February 23, 2021  1 Comment on resolve.root for css/less @imports

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.

Author: Fantashit

1 thought on “resolve.root for css/less @imports”

  1. 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

Comments are closed.