rollup-plugin-postcss-webpack-alias-less-loader

1.0.0 verified Mon Apr 27 auth: no javascript

A custom less loader for rollup-plugin-postcss that enables webpack-style path aliases in Less imports. Version 1.0.0 is the current stable release. It resolves ~ prefixes to node_modules by default and supports user-defined aliasing similar to webpack's resolve.alias. This package is specifically for projects migrating from webpack to Rollup that need alias resolution inside Less files. It integrates with rollup-plugin-postcss and rollup-plugin-alias, and is best used alongside TypeScript via rollup-plugin-typescript2 due to known issues with the original typescript plugin. There are no major updates or maintenance indicators.

Common errors

error Cannot find module 'less' ↓

cause less is not installed as a dependency of this package; it must be installed separately.

fix

npm install less --save-dev

error Error: Cannot resolve '~bootstrap/less/common.less' ↓

cause The `nodeModulePath` is not set or incorrect, or bootstrap is not installed.

fix

Ensure nodeModulePath points to the correct node_modules directory and that bootstrap is installed.

error TypeError: rollupPostcssLessLoader is not a function ↓

cause Incorrect import; the default export is the function.

fix

Use const rollupPostcssLessLoader = require('rollup-plugin-postcss-webpack-alias-less-loader'); (no destructuring).

Warnings

gotcha The default `~` resolution points to `node_modules` but can be overridden via `nodeModulePath`. ↓

fix Explicitly set `nodeModulePath` to avoid resolution errors.

gotcha Aliases must be absolute paths; relative paths may not resolve correctly. ↓

fix Use `path.resolve()` to generate absolute aliases.

deprecated Package has not seen updates since initial release; compatibility with newer Rollup or postcss versions unverified. ↓

fix Test with your Rollup and postcss versions before using in production.

gotcha Requires `rollup-plugin-alias` for JS/TS alias resolution; Less alias resolution is separate. ↓

fix Install and configure `rollup-plugin-alias` with the same aliases if needed for JS files.

Install

npm install rollup-plugin-postcss-webpack-alias-less-loader

yarn add rollup-plugin-postcss-webpack-alias-less-loader

pnpm add rollup-plugin-postcss-webpack-alias-less-loader

Imports

rollupPostcssLessLoader

wrong

const rollupPostcssLessLoader = require('rollup-plugin-postcss-webpack-alias-less-loader')

correct

import { rollupPostcssLessLoader } from 'rollup-plugin-postcss-webpack-alias-less-loader'

Package itself is CommonJS; both ESM and CJS work. The default export is a function named rollupPostcssLessLoader; named import is correct.

default

wrong

const { default } = require('rollup-plugin-postcss-webpack-alias-less-loader')

correct

import rollupPostcssLessLoader from 'rollup-plugin-postcss-webpack-alias-less-loader'

CommonJS default import via require gives the function directly, not an object with default property.

options

wrong

rollupPostcssLessLoader()

correct

import { rollupPostcssLessLoader } from 'rollup-plugin-postcss-webpack-alias-less-loader'; rollupPostcssLessLoader({ nodeModulePath: '...', aliases: {...} })

The function accepts an options object with required 'nodeModulePath' and optional 'aliases'.

Quickstart

Configures Rollup to use the custom Less loader with webpack-style aliases inside a postcss plugin.

const postcss = require('rollup-plugin-postcss');
const rollupPostcssLessLoader = require('rollup-plugin-postcss-webpack-alias-less-loader');
const path = require('path');

module.exports = {
  input: 'src/index.ts',
  output: { file: 'dist/bundle.js', format: 'esm' },
  plugins: [
    postcss({
      loaders: [
        rollupPostcssLessLoader({
          nodeModulePath: path.resolve('node_modules'),
          aliases: {
            '@myalias': path.resolve('src/aliased-folder'),
          },
        }),
      ],
    }),
  ],
};