This is a simple example to illustrate the conflict between the less include paths and the WebpackFileManager used in the less-loader webpack plugin.
There are two locations in the "app" where stylesheets are kept:
- app/assets/stylesheets
- vendor/assets/stylesheets
This is similar to a typical Ruby on Rails application.
Our "main" stylesheet is at app/assets/stylesheets/main.less
. This imports a stylesheet from a sub folder folder-1
which in turn imports a second stylesheet from a sub folder folder-2
. Both paths are specified relative to the app/assets/stylesheets
folder.
A third file - vendor-styles.less
is imported from vendor/assets/stylesheets
. The path for this file is specified relative to vendor/assets/stylesheets
.
It is possible to compile app/assets/stylesheets/main.less
by specifying both of the stylesheets folders in the paths
option passed to less.render
. An example script has been added to demonstrate this at ./compile-without-webpack.js
and can be run using npm run without-webpack
(the compiled css is just output to screen, not written to a file but this is sufficient to verify it compiles correctly).
Attempting to do the same thing using the less-loader does not work, even if the paths option is set.