1016
Views
3
Comments
Solved
Using local CSS file
Question

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,

2020-02-28 09-46-54
Eduardo Jauch
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.

2020-02-28 09-46-54
Eduardo Jauch

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.

2020-02-28 09-46-54
Eduardo Jauch

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.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.