search

iam-medvedev / esbuild-plugin-less

esbuild plugin for less files
https://npmjs.com/package/esbuild-plugin-less
Do What The F*ck You Want To Public License
43 stars 12 forks source link

Can't resolve LESS dependencies #3

Closed Lazarencjusz closed 3 years ago

Lazarencjusz commented 3 years ago

So this is pretty simple case, my app starts with

entryPoints: ['./src/index.tsx', './src/index.less'],

and I get the error error: [less-loader] './utils/components/index.less' wasn't found. Tried - ./utils/components/index.less,utils/components/index.less

In index.less I have dependencies to other less files. Should this plugin resolve less files tree and dependencies?

iam-medvedev commented 3 years ago

Thanks for this issue! This bug has been fixed. You can upgrade the package to latest version.

Lazarencjusz commented 3 years ago

@iam-medvedev , wow, that was quick. It works! Thanks a lot.

Just want to mention 1 detail, but probably it is correct because of less itself. When I import .css in less I need to do: @import (less) '../node_modules/react-calendar/dist/Calendar.css'; (less casting) otherwise i get error error: Could not resolve "../node_modules/react-calendar/dist/Calendar.css" (the plugin "less-loader" didn't set a resolve directory)

Anyways, thanks again :)

iam-medvedev commented 3 years ago

@Lazarencjusz You can try import css files with inline directive For example: @import (inline) "../node_modules/react-calendar/dist/Calendar.css";

iam-medvedev commented 3 years ago

@Lazarencjusz I have fixed this bug in the latest release. Can you check if the error is still there?

Lazarencjusz commented 3 years ago

@iam-medvedev I can confirm 0.0.7 allows directly to import css files like @import './style.css'; Thanks :)

Lazarencjusz commented 3 years ago

@iam-medvedev could I ask one more thing?

When I set 2 entry points to esbuild: entryPoints: ['./src/index.tsx', './src/index.less'],

and I have the blugin set with filename: plugins: [lessLoader({ filename: cssFileName })],

the esbuild require from me to set outdir instead of outfile, so after all, css file is always created with default name index.css.

However, I can split builds to 2 separate/independent and put those builds in chain, then the css file is created basing on outfile property. I assume this is correct flow in my case when I want to build "at once" tsx and less?

iam-medvedev commented 3 years ago

@Lazarencjusz esbuild offers both options, you can add less as an entrypoint, or as an import in your code. In the second case, you don't need any additional settings.