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