Views
Replies
Total Likes
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
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
$ 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
This error is because, Yarn is not installed on your system and not set as env variable. Please install it and try again.
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
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.
yes i need tool to convert multiple files.
Why don’t you try this one for sass compiler support on aem
https://github.com/mickleroy/aem-sass-compiler
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/.
Views
Like
Replies
Views
Likes
Replies