Is it possible to use a local (system file) main.css file to override the theme css in the service studio?

I was trying to build a workaround with a Grunt/Gulp task and Compass RubyGem in order to compile SASS into this main.css local file, but I can't find a way to do it.

I find it way too verbose to use CSS in Outsystems and perhaps SASS could help in development times.

Thanks,

Solution

Hi Vitor,

You need to remember that you need to inherit a lot of CSS from the base themes (SilkUI/OutSystemsUI), even if you are using your own theme.

Also, while you can add your own CSS in files (you can add them as resources, for example), you would have to "inject" tags in the HTML file of each page (HTTPRequestHandler has actions for that), to inform the browser to use your CSS files.

Also, another problem is the order of loading of your files, that may not be appropriate.

Because of this, I would say that you can maintain your CSS file using SASS (if you want), but once you finish messing with it, copy your CSS to the application theme Style Sheet and pages as desired.

Hope in the future OutSystems will provide better CSS control.

Cheers.

Solution

Also, maybe this course (and this video specifically) can be useful: https://www.outsystems.com/learn/lesson/945/importing-css-into-outsystems/?LearningPathId=0

Cheers.

And relatively to the Order of CSS loading:

https://www.outsystems.com/forums/discussion/20463/how-to-control-css-load-order/

Cheers

P.S. I really don't recommend going this way if you don't need dynamic CSS generated externally.