vite-less-resource-loader v1.0.0

vite-less-resources-loader

This loader will load your LESS resources into every required LESS module. So you can use your shared variables, mixins and functions across all LESS styles without manually loading them in each file.

• Made to work with CSS Modules!
• Supports Vite 1

Installation

Get it via npm:

npm install vite-less-resources-loader

Get it via yarn:

yarn add vite-less-resources-loader

Usage

Create your file (or files) with resources, which are snippets of LESS that you want available to places like CSS modules Sass:

/* resources.less */

@section-width: 700px;

@mixin section-mixin {
  margin: 0 auto;
  width: @section-width;
}

Option Examples

resources

Specify resources, contents of these will be prepended to each file.

If file resources/a.scss has content of @my-variable: #fff, we could modify the vite.config.js

var lessLoader = require('vite-less-resources-loader')
module.exports = {
  cssPreprocessOptions: {
    less: {
      plugins: [new lessLoader(['./resources.less'])],
    }
  }
}

Now you can use these resources without manually import them:

/* component.less */

.section {
  .section-mixin(); // <--- `section-mixin` is defined here
}

License

vite-less-resources-loader is available under MIT. See LICENSE for more details.