Less Plugin Module Resolver

Inspired by less-plugin-npm-import and babel-plugin-module-resolver

Adds the ability for less to set alias imports. Especially to handle usage like ~ in webpack when using Rollup or other bundlers.

Install

# use npm
npm install less-plugin-module-resolver

# use yarn
yarn add less-plugin-module-resolver

# use pnpm
pnpm install less-plugin-module-resolver

Usage

@import (less) '~normalize.css';

const less = require('less');
const { LessPluginModuleResolver } = require('less-plugin-module-resolver');

less.render('input', {
  plugins: [
    new LessPluginModuleResolver({
      alias: {
        '~': '',
      },
    }),
  ],
});

Plugin Options

rootDir

The directory to resolve less files. Default to ''.

alias

const less = require('less');
const { LessPluginModuleResolver } = require('less-plugin-module-resolver');

less.render('input', {
  plugins: [
    new LessPluginModuleResolver({
      rootDir: path.resolve(__dirname, 'src'),
      alias: {
        $: (_, restPath) => `styles${restPath}`),
        '^@mixins$': 'styles/mixins/index.less',
      },
    }),
  ],
});

When using the above configs:

# origin
@import "@mixins";
@import "$/variables/index.less";

# converted to
@import "/User/me/project-foo/src/styles/mixins/index.less";
@import "/User/me/project-foo/src/styles/variables/index.less";

The alias config to resolve import less files. Alias key should be string including regexp string, corresponding replacer value should be string. You can use function replacer when the situation is more complicated.

More detailed api about alias see below:

alias key

Alias key should be a normal string or regexp string. Mind that regexp string will pass to RegexpConstructor and should be not enclosed between slashes but started with ^ or end with $.

More docs about RegexpPatternString

• RegexpPatternString
• RegExp#literal_notation_and_constructor

Note that you can use special replacement patterns from String.prototype.replace, like $1, $n. See String_Replace#specifying_a_string_as_a_parameter

const less = require('less');
const { LessPluginModuleResolver } = require('less-plugin-module-resolver');

less.render('input', {
  plugins: [
    new LessPluginModuleResolver({
      rootDir: path.resolve(__dirname, 'src'),
      alias: {
        '^@theme/(.+)': 'styles/theme/$1.less',
      },
    }),
  ],
});

alias value

Alias value should be a string replacer or function replacer. The function replacer is similar to the 2rd argument/callback in String.prototype.replace.

type StringReplacer = string;

type FunctionReplacer = (substring: string, ...args: any[]) => string;

License

MIT