Parcel: Configure LESS options and use plugins

[HannanAkbar]

❔ Question

I am trying to set up transform to configure LESS options and use plugins such as 'less-plugin-autoprefix' and 'less-plugin-glob'.

Found no reference in the docs and no luck so far.

[KeineLimonade]

You can also create a less key in your package.json and store your config there.

[HannanAkbar]

I'm trying to set these options in the config. For example:

{
    plugins: [require('less-plugin-glob')]
}

[DeMoorJasper]

create a .lessrc.js file?

[HannanAkbar]

Yes, .lessrc file gave JSON error so I tried .lessrc.js, but for some reason I couldn't get the 'less-plugin-glob' running.

@import "base/**";

Error: ENOENT: no such file or directory

[HannanAkbar]

I also couldn't get 'less-plugin-autoprefix' and 'less-plugin-npm-import' to work.

I really love parcel for its simplicity but there's a lack of good documentation.

[DeMoorJasper]

Your .lessrc.js file should look something like this:

module.exports = {
    plugins: [
      require('less-plugin-glob'),
      require('less-plugin-autoprefixer'),
      require('less-plugin-npm-import') // This one should be obsolete, as parcel handles this already
    ]
}

[DeMoorJasper]

I agree there should be better docs.

The docs are open-source and if everyone who comes across an issue with parcel (doc related) and finds the answer would contribute it back to the docs, it would help out a lot. https://github.com/parcel-bundler/website

The docs are constantly improving and will continue to improve in the future.

[HannanAkbar]

I replaced the code but It's throwing the same error. Seems like it's not picking up the config.

.lessrc.js

module.exports = {
    plugins: [require('less-plugin-glob')]
}

[HannanAkbar]

There's no Transform for LESS. Would it work as expected?
https://github.com/parcel-bundler/parcel/tree/master/src/transforms

[DeMoorJasper]

@HannanAkbar All less transforms are performed inside LESSAsset.js
https://github.com/parcel-bundler/parcel/blob/master/src/assets/LESSAsset.js

Only some shared and large transforms are put into the transforms folder, the structure might change once parcel becomes a monorepo, but for now LESSAsset contains everything.

[HannanAkbar]

This should be labelled as a bug.

To reproduce:

.lessrc.js

module.exports = {
    plugins: [require('less-plugin-glob')]
}

main.less

@import "base/**";

Throws an error

Error: ENOENT: no such file or directory

[DeMoorJasper]

Not untill we know it is a bug, according to the code in the asset, this should work, or at least do something

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.