Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

i there any way scss folder to less folder conversion

Avatar

Level 2
 
10 Replies

Avatar

Community Advisor

Hi @gmahendra 

 

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

Avatar

Level 2

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

Avatar

Community Advisor

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

Avatar

Level 2
$ 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
 

Avatar

Community Advisor

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

Avatar

Level 2

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

Avatar

Community Advisor

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.

Avatar

Community Advisor

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

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

Avatar

Community Advisor

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/.