Compiling Less in Rapido

Martin Grønbekk Moen

Posted on 04/05/2018 15:32:18

I'm venturing into the unknown world of Rapido custom development, and have a ton of questions.
Since I have not used Less in DW until now, I feel that I need some more information on how things are done.

I have read the documentation https://doc.dynamicweb.com/rapido/development/development/rapido-css but I still dont know how all the Less-files are compiled!
Maybe I'm stupdid, but are they automatically compiled by DW, or do we have do the compiling ourselves?

Have you made some kind of video tutorial on how to do custom coding in Rapido?

Replies

Karsten Thuen

Posted on 07/05/2018 13:43:22

This post has been marked as an answer

Hi Martin

Maybe you can use this answer. To make Visual Studio compile the Less to CSS, you must install the WebCompiler plugin: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler Then when you click save on one of your Less files, it automatically compiles the minified CSS file. You can trace the progression in the blue status bar in the bottom of Visual Studio. But be aware, it is not that easy to see if you have introduced an error. But if you suspect there may be an error, keep an eye on the status bar while saving multiple times. If there is an error it will be shortly shown in the status bar. To track down the error, click the “output” tab in Visual Studio and locate the elements that points to something Less related.

There is a full Less project ready for you, just for customizations. Go to templates/designs/rapido/css/ignite Here we have made a lot of empty modifier classes available for you, just fill in the css where you need it. And, beside that, you can add all the custom stuff you would like.

Best regards
Karsten Thuen

Votes for this answer: 1

Martin Grønbekk Moen

Posted on 07/05/2018 13:46:24

Thanks Karsten

But if you do all your changes in "templates/designs/rapido/css/ignite" you still have to compile through VS?
Also, does that mean that you cant do CSS changes from "Files" inside the DW admin anymore?

Jacob Storgaard Jensen

Posted on 07/05/2018 13:51:02

Same question as Martin... so the whole Ignite part of Rapido is not compiled server-side? I was a little surprised a few minutes ago when attacking my first Rapido project, because it says nowhere in the docs that Ignite is not compiled server-side, but the stuff from website-settings are...
Are we obligated to use that exact less compiler you suggest og could I ie. use CodeKit?

Martin Grønbekk Moen

Posted on 07/05/2018 13:54:21

Exactly, was surprised about that too.
Would really like some more information about this process.

Jacob Storgaard Jensen

Posted on 07/05/2018 14:04:35

To my needs I think this approach is fine, because I do local compiling on all projects anyways.
But as for Rapido to be focused on speed in the implementation process of sites, it would have been nice to just be able to add some small css adjustments to any of the Ignite specific less-files, and boom you are there, no need for local compiling... just saying ;-)

Karsten Thuen

Posted on 07/05/2018 14:51:11

I have send a more thorough guide on both working with Less and setting up the whole thing in Visual Studio, to our documentation guy. Hopefully it will be at the doc site soon.

The reason that Rapido Less files are autogenerated, is that it triggers when website settings is saved. Ignite is not autogenerated, as it is not related to website settings. The gain by letting Visual Studio compile, is that you do get easily visible error tracking.

You can use any compiler you want. And I know some are already using other tools in Rapido.

A small trick: If you do not want to set it all up in Visual Studio, just to make som minor CSS changes on a site, just write it in the ignite.min.css Of course it will not be minified, and if you some day want to compile something down to the minified file, you will lose what you wrote there. But I think in some cases it may be a fine solution. It is up to you to decide.

Best regards
Karsten Thuen

Martin Grønbekk Moen

Posted on 10/05/2018 23:51:30

I'm trying to compile the less files now using this tutorial and VS Code.
https://code.visualstudio.com/docs/languages/css

In that tutorial there is a task file, which needs to be setup in order for it to work. My question is how do I configure the tasks?


// Less configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Less Compile",
"type": "shell",
"command": "lessc less-file.less css-file.css",
"group": "build"
}
]
}

I guess I have to input the less-file in "command". But are there one single less file to compile, or do I have to create multiple tasks?

Martin Grønbekk Moen

Posted on 11/05/2018 08:07:35

Guess I found out. All I really need to compile is this "Files/Templates/Designs/Rapido/css/ignite/_ignite.less".

Correct?

Karsten Thuen

Posted on 14/05/2018 09:33:34

Yes, that is the one. The file is used to collect all the rest of the Less files for Ignite.

You must be logged in to post in the forum

Developer forum

Compiling Less in Rapido

Replies