I successfully set up node.js on my system and then installed the LESS CSS preprocessor through NPM. However, when I try to run commands like:
lessc main.less
or
lessc main.less > output.css
I get an error saying -bash: lessc: command not found
I’m working on macOS using the Terminal application.
UPDATE:
I found that after installing Node, you need to create a symbolic link:
ln -s ~/.npm/less/1.2.1/package/bin/lessc (target directory path)
This allows you to execute less commands on files in that specific directory.
While this solution works, I’m having another issue. The compiler isn’t merging imported files into a single CSS output. Instead, it keeps the import statements as they are. I was expecting all the CSS from imported files to be combined into one consolidated file.
That symbolic link approach is pretty outdated and messy. Just install LESS globally with npm install -g less. This adds the lessc command to your PATH automatically, so you can use it anywhere without messing with manual links.
For your import issue - sounds like you’re mixing up CSS @import with LESS @import. LESS only merges files imported with LESS syntax. If your files have .css extensions or you’re using CSS import syntax, the compiler treats them as regular CSS and leaves them alone. Make sure your imported files use .less extensions and you’re importing them correctly in your LESS files. Then the compiler will bundle everything into one output file like you want.
Quick fix - run npx lessc main.less if u don’t wanna install globally. Works with local installs and skips the hassle. For imports not merging, check that your import paths are relative (like @import "./somefile.less";) instead of absolute URLs. Less treats absolute paths as external CSS imports.
That command not found error occurs because NPM installs the package locally by default. While your symbolic link solution might work, it can lead to issues during updates due to versioning in the path. Regarding your import merging problem, the LESS compiler only processes files that use LESS syntax. If your imported files are standard CSS, they will remain as import statements in the final output. Ensure your imported files are correctly written in LESS format and that you use the appropriate import syntax. Also, verify your relative paths, as the compiler might interpret them as external files rather than files to merge.