vite-plugin-less-glob-import

Use glob syntax for @import in you less file.

Install

1npm i -D vite-plugin-less-glob-import

1// In vite.config.js
2
3import { defineConfig } from 'vite'
4import lessGlobImports from 'vite-plugin-less-glob-import';
5
6export default defineConfig({
7  plugins: [
8    lessGlobImports()
9  ]
10});

Usage

Note: Globbing only work in a top-level file, not within referenced files.

1// In src/styles/main.less
2
3@import 'utils/**/*.less';
4@import 'objects/**/*.less';

The above will be transformed into something like the following before Vite processes it with Sass:

1@import 'utils/utils-a.less';
2@import 'utils/utils-b.less';
3@import 'objects/objects-a.less';
4@import 'objects/objects-b.less';
5@import 'objects/objects-c.less';