share less files in components architecture

Question

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

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 */
}

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?

With less you can use inheritance, you can import the `variables.less` file in the top of your file `app.less` before the other imports, and you will have the variables available in all others files. You don't need to import variables in each file. Maybe are you using styles inside each component with some framework? Could you share more info about that? — The.Bear, Dec 20 '18 at 16:14

score 0 · Accepted Answer · answered Jan 14 '19 at 14:57

0

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

answered Jan 14 '19 at 14:57

IsraGab

4,819
3
27
46

share less files in components architecture

1 Answers1