39
Views
9
Comments
Solved
@import css not working
Question
Application Type
Reactive
Service Studio Version
11.10.0 (Build 34711)

Dear all,

I am trying to import an external CSS file in my Theme CSS. As this CSS file is generated by an external app and might change, I would prefer not to simply copy + paste it.

In this post, I read that this is possible, and indeed in Traditional Web it has always worked for me. In Reactive, however, the CSS is ignored. I tried it with a file with only one rule (make everything red) just to ensure the problem wasn't the CSS itself.

I import the file to resources as follows:

And then start my CSS with the line 

@import url(/Module_Name/customicons.css);

But no result. If I change the filename, it gives an error, so it does know that the file is there. Using single quotes doesn't work, either. Any ideas?


Any help would be greatly appreciated. Thanks!

Joris

Staff
Rank: #20
Solution

Hi Joris,

According to the CSS spec, import rules must precede other rules. To overcome this you have several alternatives:

  1. Open theme editor and click "Reset Theme Editor"
  2. Create another theme (based on OutSystems UI) to do that import, and base your app theme on that one (theme editor only applies to the module default theme)
  3. Do the import of the CSS with JavaScript

Cheers,
Tiago Simões

Rank: #28456

YES. You, sir, are my hero. Resetting the Theme Editor solved my problem. I didn't know that button actually removed the editor's (often unwanted) CSS - that's going to come in handy a number of times in the future. 

The import works fine now. Thanks so much!

mvp_badge
MVP
Rank: #2

Did you check with the browser's developer tools whether it can find the CSS file or whether it gives a 404?

Rank: #28456

Hello Kilian, cheers for responding.

In Chrome, my console's empty, and in the Network tab I find no call to the file in question at all. It's not listed in the Sources either. If I check my CSS there, I see it's prepended the generated CSS from the Theme Editor and then changed the url itself to what I presume is the compiled location of the file, but said file is not listed in the Sources:

If I navigate to [SITE_URL]/customicons.css?t0prkgG7B8mdQTOmtxQ5gw, I actually neatly get the CSS file. So it's compiling correctly, the import statement is displayed correctly, it's just not actually importing it for some reason.

Any ideas?

mvp_badge
MVP
Rank: #2

Thanks for the additional info. I'll ask around to see if someone can give more information about this.

Rank: #28456
mvp_badge
MVP
Rank: #14

I think it's a bug (oversight)  indeed, because the css is not loaded "as usual but with the CSSHelper in react.
The other CSS-files are "loaded" by that piece of js.

I do hope we get an answer from Outsystems :)




mvp_badge
MVP
Rank: #75

Hi Joris,

I just want to share some observation which I had regarding this case..

1) On adding the import rule within the Style Sheet > Application module tab, I encountered the below mentioned warning message due to which the external style sheet got failed to load in the browser

2) On adding the below mentioned import rule in the respective screen style sheet section, it's working as expected

@import url('../sample-style.css'); // not included the module name

 3) For testing purpose, the external style sheet was defined with body selector style definition with !important (for more importance) and it got reflected in the page.

4) Below showcased is the render directory structure in the Browser Inspect > Sources tab

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #28456

Hello Benjith,


Thanks so much for taking the time to test this. Yes, when I move the import statement to a page's style sheet, it does work for me as well. I'm afraid that's not a valid solution for me though: I'm creating a Theme module which will be used by applications in the future. So I really need the import to be in the module stylesheet.

Staff
Rank: #20
Solution

Hi Joris,

According to the CSS spec, import rules must precede other rules. To overcome this you have several alternatives:

  1. Open theme editor and click "Reset Theme Editor"
  2. Create another theme (based on OutSystems UI) to do that import, and base your app theme on that one (theme editor only applies to the module default theme)
  3. Do the import of the CSS with JavaScript

Cheers,
Tiago Simões

Rank: #28456

YES. You, sir, are my hero. Resetting the Theme Editor solved my problem. I didn't know that button actually removed the editor's (often unwanted) CSS - that's going to come in handy a number of times in the future. 

The import works fine now. Thanks so much!