How to make Webpack eat Less + BEM normally?

Question

Less

My project looks like

--blocks -> тут блоки со своими less и тд технологиями
--less
       --mixins -> тут миксины со своими less
       variables.less -> переменные

By " eat normally " I mean using variables and mixins in blocks.
The input file looks like this right now:

let files = []; 

function importAll(r) {
    r.keys().forEach((s, i) => {
        files[i] = r(s);
    });
}

import '../less/variables.less';
importAll(require.context('../less/mixins/', true, /\.less$/));
importAll(require.context('../blocks/', true, /(\.less|\.js)$/));
importAll(require.context('../assets/', true, /\.less|\.js|\.css$/));

And of course nothing compiles. Although it seems like variables on top and mixins below them. Using less makes no sense without banal mixins and variables. And it will be difficult to start any one file less where it will be difficult to import everything. What if the project is big? If, of course, you can import folders into less, then tell us how. Couldn't find anything on the internet.

Answer 1

The only solution is to include mixins and variables in one file and not worry about including the common file when necessary in blocks.