Is it possible to include multiple imports within the early CSS, so that we can include our custom variables that are hosted in a repository or another location?
For example
@import “http://MyExampleLocation/scss/colours”;
@import “http://MyExampleLocation/scss/fonts”;
Is it also possible to use imports in the late CSS?
Hi Kevin,
We don’t currently support imports of remote scss files for compilation. It’s not possible with relative paths either, although we will aim to make that possible within Code Studio in future versions.
Even if we do support this in future, a change in the scss file at source would not be detected automatically within MATS. The builder would need to prompt a recompile into CSS.
You could instead importing a CSS file directly from source site (if Access Profiles are configured). This is much less useful and flexible but changes in the source CSS file would then be automatically included within MATS. This would be discouraged though, since a change in an external source file could then break your MATS application making it less resilient.
Let me know if you need any further information.
I realise this is now an old topic but can you not even reference a separate css file held locally?
By that I mean either a separately defined stylesheet (in CS) or indeed just another css / scss file inside an existing Stylesheet ?
The option seems to be there but I have never successfully got any “reference” to work …
Ours css files are getting “massive” and it would aid in future upkeep if we could split them up a bit (for example).
Hi Haydn.
I have just tested this myself and it is possible currently, but there are a few caveats.
To start with ,to reference the original comment, we still don’t support loading SCSS files from either external or outside of the CS widget.
You can however import an external CSS file into a component by doing:
@import url("https://mydomain.com/mytheme.css");
This will then load the file from the URL when the page with that component is loaded, but it’s worth noting that CSS files are imported regardless of whether the component is actually loaded, therefore any CSS files you import have the potential to change the styling of the entire interface.
There are two ways to host the CSS;
External Domain / CDN
You can host the CSS file on an external domain or CDN and then import it like the above code does, but the only thing you’d need to do is go to the interface firewall rules, and add the domain to the “Domains that can contribute content to the liberty create application” and make sure to check the CSS option, for example, the URL in my example above, you would need to add mydomain.com to the above.
This will then load, I tested this on my current application and it works fine, but as I noted above, the library I included (bulma) changed, and broke, some of the layout of my interface page.
Hosting via Create
So you can’t upload an asset file or anything to that effect, because asset files are returned as plain text, for security reasons, meaning if you were to try and load this file, the browser would not be able to understand the file type when loaded.
You can however create a Code Studio widget that simply contains a load of SCSS files, (you can remove the content of the .js, .htm files), and when you compile it will generate a .css file that you can import, meaning you can utilise SCSS and nicely split files up and import them however you need, meaning one component becomes a “library”.
Once you have done that and compiled/published it, you can find the URL and it should look something like:
https://your-app-name.oncreate.app/assets/code_studio/<codeStudioId>/<codeStudioId>.css
You can then put that full URL into the @import url(...) statement and it will load.
The caveat with this method is that, you will need the full URL, because by trying to just put the /path/to/file.css it will try and find a file relative from it’s location, which won’t work due to permissions, so you would need a full URL, and of course you’d then need to deal with each environment of that URL.
It’s worth adding though that, you can add your own SCSS via theme packs or via the stylesheets which can contain SCSS/CSS which can be loaded into the application as a whole, you could create a set of “helper” CSS/SCSS that is loaded into each page with classes. You can then add the classes to your code studio components and use them that way, especially if you are intending to use the same CSS/SCSS across multiple components.
I hope that helps, let me know if you need any further information.
Our interaction designer has a plan to split our css into partials to make it easier to maintain, I will get an update from him and post back next week with some screenshots if I can (not sure how far he has got on this)
Brilliant thats excellent and thanks for the sample code.
Seems the combinations I tried just didnt quite cut the mustard 
I have now confirmed this as working for me so I can start to split out our css to aid future maintenance.
Thanks very much.
