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
Hi Joris,
According to the CSS spec, import rules must precede other rules. To overcome this you have several alternatives:
Cheers,Tiago Simões
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!
Did you check with the browser's developer tools whether it can find the CSS file or whether it gives a 404?
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?
Thanks for the additional info. I'll ask around to see if someone can give more information about this.
Awesome, I appreciate it!
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 :)
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
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.