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

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

Usage

1@import '~@wux/less/common.less';
2@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:

1const lessOptions = {
2  plugins: [
3    new LessImportAliasPlugin({
4      projectCwd,
5      prefix: '~',
6      aliases: {
7        '@': join(projectCwd, 'src'),
8      },
9    }),
10  ],
11};
12const stylingPlugin = forgePluginStyling({
13  use: [['less', lessOptions]],
14  format: 'cjs',
15  projectCwd,
16  autoAppendToModule: false,
17  styleOutputExt: '.wxss',
18  postcssOptions: {
19    plugins: [
20      // 750px to rpx
21      forgePluginPostcssPixel({
22        rootValue: { px: 1 },
23        outputUnit: 'rpx',
24        ...pixelOptions,
25      }),
26      forgePluginPostcssAssets({
27        projectCwd,
28        filter: assetsOptions?.filter,
29        inlineConfig: assetsOptions?.inlineConfig,
30        inlineFallbackType: assetsOptions?.inlineFallbackType,
31      }),
32    ],
33  },
34});

programing

Reference