webpacklesswebpack-4less-loader

share less files in components architecture


I have 2 less files that I want them to be globals:

  1. functions.less - where functions are declared

ex:

f_transition(@transString: 0) when not (@transString = 0) {
    transition: @transString;
    -moz-transition: @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition: @transString; /* Opera */
}
  1. variables.less -where all my colors are defined

Instead of writing down @import variables.less in each less files, I would like them to be accessible by default.

Maybe is it possible to configure webpack using a loader or something. I saw that the scss-loader has a resource property and is possible to do such a thing.

Is it possible with less?


Solution

  • I found a loader to do it for less files or whatever: https://www.npmjs.com/package/style-resources-loader