less-plugin-module-resolver

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
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
: 'styles/mixins/index.less',
      },
    }),
  ],
});

When using the above configs:

__CODE_BLOCK_4__

The alias config to resolve import less files. Alias key should be string including __INLINE_CODE_2__, 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 __INLINE_CODE_3__ or __INLINE_CODE_4__. Mind that regexp string will pass to __INLINE_CODE_5__ and should be not enclosed between slashes but started with __INLINE_CODE_6__ or end with __INLINE_CODE_7__.

More docs about __INLINE_CODE_8__

• __INLINE_CODE_9__
• __INLINE_CODE_10__

Note that you can use __INLINE_CODE_11__ from __INLINE_CODE_12__, like __INLINE_CODE_13__, __INLINE_CODE_14__. See String_Replace#specifying_a_string_as_a_parameter

__CODE_BLOCK_5__

alias value

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

__CODE_BLOCK_6__

License

MIT