less-plugin-module-resolver
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    Less Plugin Module Resolver

    Github Action codecov Version Downloads License

    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

    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

    Install

    npm i less-plugin-module-resolver

    DownloadsWeekly Downloads

    28

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    37

    Last publish

    Collaborators

    • vagusx