I'm trying to split out my Theme into a couple of separate CSS files to help with housekeeping really (I have a custom font for icons which I want to define in its own stylesheet). The issue I'm having, is how do I make sure that second CSS file is imported?

I know the font works in the default theme, I just can't get it to load through another.

I've added an additional theme, populated it, but can't referenceit anywhere. I have also included the below in my default theme

@import url(/<ApplicationName>/Theme.Icons.css);

Any suggestions where I'm going wrong?

Hi Steve,


I'm not sure you want to split the CSS throughout files, this can be bad for performance.

When a page loads, all the files will be downloaded (images, CSS and javascript among them).

Files can be downloaded in parallel (usually 8 in Desktop or 4 in Mobile).

If you are splitting the CSS among files, it will be more files to download and they might not be downloaded in parallel due to the limits on your device / desktop. See in example below:


In my example, all these files will be downloaded because CSS was split among all the Rich Widgets components.


So my advice would be organize your CSS (see OutSystems base themes for examples on organization with sections and indexes) but would not be split CSS in multiple files.


Cheers,

João Marques

Steve Webb wrote:

I'm trying to split out my Theme into a couple of separate CSS files to help with housekeeping really (I have a custom font for icons which I want to define in its own stylesheet). The issue I'm having, is how do I make sure that second CSS file is imported?

I know the font works in the default theme, I just can't get it to load through another.

I've added an additional theme, populated it, but can't referenceit anywhere. I have also included the below in my default theme

@import url(/<ApplicationName>/Theme.Icons.css);

Any suggestions where I'm going wrong?

 Hi Steve ,

Can you put your Theme.Icons.css file under resource file and then import.


Under Data Tab > Resources folder > Theme.Icons.css

and change the Deploy action :Deploy to target directory

Please see below



 use the runtime path to import url


Hope this helps

Thanks

AD