The flatjs plugin @flatjs/forge-plugin-less-import-alias

Features

A plugin for PostCSS that allows users to define webpack style aliases and have them resolve.

Installation

npm i --save @flatjs/forge-plugin-less-import-alias

Usage

@import '~@wux/less/common.less';
@import '~@/styles/mixin.less';

~ will get resolved to node_modules by default but is overridable.

usage below is a complete example that is used along side webpack to generate cjs and es modules:

const lessOptions = {
  plugins: [
    new LessImportAliasPlugin({
      projectCwd,
      prefix: '~',
      aliases: {
        '@': join(projectCwd, 'src'),
      },
    }),
  ],
};
const stylingPlugin = forgePluginStyling({
  use: [['less', lessOptions]],
  format: 'cjs',
  projectCwd,
  autoAppendToModule: false,
  styleOutputExt: '.wxss',
  postcssOptions: {
    plugins: [
      // 750px to rpx
      forgePluginPostcssPixel({
        rootValue: { px: 1 },
        outputUnit: 'rpx',
        ...pixelOptions,
      }),
      forgePluginPostcssAssets({
        projectCwd,
        filter: assetsOptions?.filter,
        inlineConfig: assetsOptions?.inlineConfig,
        inlineFallbackType: assetsOptions?.inlineFallbackType,
      }),
    ],
  },
});

programing

Reference