Hi Guys,

I hope you are all well. I need a bit of help. I would like to be able to work on my module's CSS without having to publish each time that I make a small change.

Hi Munyaradzi,

I'm not sure what Sublime Text is, but if you want to change your CSS and get a good feel for your changes without publishing each time, any modern browser will allow you to use Developer Tools in order to edit CSS on the fly and see the impact on the page. Here's an example for Chrome:

Right click what you want to change and press Inspect. This will open the Console and will let you edit the HTML document:

Select the element you want to change, and write a new class directly on the new element. Afterwards, click on the plus button on the right side of the console:

Yeah, you got two choices... the first one is the easy one which Afonso has laid out pretty clearly there, and it's the one I use 99% of the time.

I would add that you can also go to the Sources tab and find all the CSS files there. Find the relevant one for your module and edit it to see changes in real time:


Might I add that Firefox has excelleng web dev tools too. It even has a straight up styles editor:

 The second one, if you want to edit more CSS and have access to things as beautify is to copy the CSS from these documents into your favorite editor (Sublime, VS Code...) and make your changes, then copy paste it back to the Dev tools. Once you're happy, copy and paste back to OutSystems CSS and publish.

Hi,

you can install CSS inject (chrome extension) . it enables you to working with sublime text. Your will change the CSS to file  and  save , it will automatically load and immediately reflect the changes you were doing.

For more Front end techniques and  How to avoid 1 click publish  you can go through this video . At 46:00 you can watch How to avoid 1 click publish.


Thanks and Regards,

Rahul