Installing the LESS CSS Preprocessor

Ionic Framework Ionic Vue
1

Is there an easy way to integrate the LESS CSS Preprocessor with my Component development?

When I tried to install LESS, I got this:

imaginativeone@Dougs-MacBook-2 vue-paradeto % npm install less less-loader --save-dev

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: **vue-paradeto** @ **0.0.1**
npm ERR! Found: **webpack** @ **4.46.0**
npm ERR! node_modules/webpack
npm ERR! peer **webpack** @" **^4.0.0** " from **@intervolga/optimize-cssnano-plugin** @ **1.0.6**
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR! **@intervolga/optimize-cssnano-plugin** @" **^1.0.5** " from **@vue/cli-service** @ **4.5.13**
npm ERR! node_modules/@vue/cli-service
npm ERR! peer **@vue/cli-service** @" **^3.0.0 || ^4.0.0-0** " from **@vue/cli-plugin-babel** @ **4.5.13**
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev **@vue/cli-plugin-babel** @" **~4.5.0** " from the root project
npm ERR! 7 more (@vue/cli-plugin-e2e-cypress, @vue/cli-plugin-eslint, ...)
npm ERR! peer **webpack** @" **^4.0.0 || ^5.0.0** " from **@soda/friendly-errors-webpack-plugin** @ **1.8.0**
npm ERR! node_modules/@soda/friendly-errors-webpack-plugin
npm ERR! **@soda/friendly-errors-webpack-plugin** @" **^1.7.1** " from **@vue/cli-service** @ **4.5.13**
npm ERR! node_modules/@vue/cli-service
npm ERR! peer **@vue/cli-service** @" **^3.0.0 || ^4.0.0-0** " from **@vue/cli-plugin-babel** @ **4.5.13**
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev **@vue/cli-plugin-babel** @" **~4.5.0** " from the root project
npm ERR! 7 more (@vue/cli-plugin-e2e-cypress, @vue/cli-plugin-eslint, ...)
npm ERR! 20 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev **less-loader** @" ***** " from the root project
npm ERR!
npm ERR! Conflicting peer dependency: **webpack** @ **5.51.1**
npm ERR! node_modules/webpack
npm ERR! peer **webpack** @" **^5.0.0** " from **less-loader** @ **10.0.1**
npm ERR! node_modules/less-loader
npm ERR! dev **less-loader** @" ***** " from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/imaginativeone/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/imaginativeone/.npm/_logs/2021-08-27T15_17_11_089Z-debug.log
2

Hmm, haven’t used Less in a long time, is it still being maintained?
Anyways, the output is telling you how to move forward…

npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

But it’s more likely an issue with less/less-loader. Might want to not use it

3

You’re probably right. Would you point me in the direction of an Ionic template that has a CSS Preprocessor that works?

4

Took a look at what the packages that are installed with vue-cli by default it you pick sass, and it looks like this will be the right packages.

npm i sass sass-loader@8

But I’d suggest trying regular CSS if you can. A few less deps you need to worry about plus modern CSS replaces almost all the needs of sass.