@import CSS


I have some eSpaces that uses the same CSS so I used the @import url("http://server/eSpace/web.css"); to do so.

I made a new eSpace with the CSS to be imported.

All eSpaces are in the same server, with the @import in the StyleSheet, nothing else.

Can anyone help me with this please?
Hi José,

Best way (For 5.1 or 5.0 versions): Configure the External Style Sheet eSpace Property on each "css consumer" eSpace instead of using the @import hint.

Best Regards,
Rafael Pereira
Does it support WYSIWYG in each eSpace that consumes the CSS?

How do you configure the External Style Sheet?
About your WYSIWYG question: 


About the configuration:

Rafael Pereira
I've already tried the external style sheet, but it doesn't suite my needs.

I need a solution that centers all my CSS in one place to be consumed by other eSpaces and at the same time be visible while Developing.

I would like to try out the @import solution, but I don't no that am I doinh wrong.


After almost a day work around the @import CSS issue, me and my colleague fund out a solution.

The Problem:

I deleted the CSS and pasted the @import url("http://server/eSpace/web.css"); in its place.

After publishing the eSpace, it didn't asume the
@import url("http://server/eSpace/web.css");, it rather would read the old CSS that was deleted.

The Solution:

After we
deleted the CSS and pasted the @import url("http://server/eSpace/web.css");, we created a new dummy webscreen and publised the eSpace.

It doesn't make much sense but it works just fine now!

Hi José,

Congratulations on sorting that out. I've forwarded this info to support so they can have a look into that problem.

Tiago Simões
Hi José

Let me attempt to clarify the behaviors you're getting:
  1. The @import () in the espace StyleSheet will not provide WYSIWYG on Service Studio during development, because Service Studio doesn't support this style sheet construct during the design on the IDE, although it works on runtime. This is a feature that will be included on the upcoming Agile Platform releases.
  2. The change of the CSS is not effective after an 1-Click Publishing process, and thus, when you change the style sheet to use only the @import construct, after the 1-Click Publishing it would still use the old CSS. However, if you change the webscreens, the new stylesheet will take effect on the next 1-Click Publishing. This is a known miss-behavior that can happen in some scenarios when the differential compilation of the espace fails to recognize that the style sheet as changed, and it needs to be updated during the 1-Click Publishing. OutSystems is aware of this problem and it has been reported to the R&D team to be fixed on future revision patches. As a workaround you can "touch" the webscreen or perform a non-impacting change on the screen, forcing the compilation to recognize the change, or ultimately, publish the espace within a solution with the Publish with Full Compilation option checked.

Miguel Simões João
Hi everyone.

Thanks for the clarification, I'm looking to the new update.

About point 2 your suggestion of "twiking" the webscreen on a non-impacting way was attempted earlier but without sucess.

Has a Designer I have some difficulty understanding the Agile Platform vocabulary but with help from my developer
colleagues I will tryout the rest of the suggestions made.

In future updates to come I hope you guys take a look at the CSS editor.

It would be nice to have auto-complete selectors to help speed up workflow.

Cheers to all