i there any way scss folder to less folder conversion

[iamnjain]

Hi @gmahendra 

Can you please provide more details about the issue you are facing?

[gmahendra]

i have few scss files i want to convert to less
ex :  


src/main/webpack/site/scss/foundation

test.sess

var.sess

i want to convert to less below folder 
src/main/content/jcr_root/apps/test/clientlibs/clientlib-test/css

test.less

[iamnjain]

You need to use some third party library to configure in ui.frontend and make some changes in webpack config too.

For eg. this is one opensource tool for conversion

https://github.com/mucluck/sass2less

[gmahendra]

$ yarn add sass2less

\ui.frontend> yarn add sass2less
yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that
the path is correct and try again.
At line:1 char:1
+ yarn add sass2less
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
 

[iamnjain]

This error is because, Yarn is not installed on your system and not set as env variable. Please install it and try again.

[gmahendra]

C:\Users\gmahendr\OneDrive - test\Desktop\pro\test\aem-test-web\ui.frontend>sass2less main.less build.css
node:internal/modules/cjs/loader:959
throw err;
^

Error: Cannot find module 'commander'
Require stack:
- C:\Users\gmahendr\AppData\Local\Yarn\Data\global\node_modules\sass2less\bin\sass2less.js
←[90m at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)←[39m
←[90m at Function.Module._load (node:internal/modules/cjs/loader:804:27)←[39m
←[90m at Module.require (node:internal/modules/cjs/loader:1028:19)←[39m
←[90m at require (node:internal/modules/cjs/helpers:102:18)←[39m
at Object.<anonymous> (C:\Users\gmahendr\AppData\Local\Yarn\Data\global\node_modules\←[4msass2less←[24m\bin\sass2less.js:3:17)
←[90m at Module._compile (node:internal/modules/cjs/loader:1126:14)←[39m
←[90m at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)←[39m
←[90m at Module.load (node:internal/modules/cjs/loader:1004:32)←[39m
←[90m at Function.Module._load (node:internal/modules/cjs/loader:839:12)←[39m
←[90m at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)←[39m {
code: ←[32m'MODULE_NOT_FOUND'←[39m,
requireStack: [
←[32m'C:\\Users\\gmahendr\\AppData\\Local\\Yarn\\Data\\global\\node_modules\\sass2less\\bin\\sass2less.js'←[39m

[MayurSatav]

Hi @gmahendra ,

If you are looking for any tool then you can use Python script to convert .scss files into .less files. you can use the sass and lesscpy libraries.

[gmahendra]

yes i need tool to convert multiple files.

[DPrakashRaj]

Why don’t you try this one for sass compiler support on aem 

https://github.com/mickleroy/aem-sass-compiler

[BrianKasingli]

Yes, you can do this with the ui.frontend, which comes apart of the AEM Archtype, https://github.com/adobe/aem-project-archetype. Within the ui.frontend, you can update the NPM modules, and instead of using SCSS, you can use LESS. So instead of using sass-loader, you can use less-loader, https://webpack.js.org/loaders/less-loader/.