A plugin for PostCSS less-loader that allows users to define webpack style aliases and have them resolve.
npm install @flatjs/forge-plugin-less-import-alias@flatjs/forge-plugin-less-import-aliasA plugin for PostCSS that allows users to define webpack style aliases and have them resolve.
``shell`
npm i --save @flatjs/forge-plugin-less-import-alias
`less`
@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:
`ts``
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,
}),
],
},
});