Issue
Design Studio only allows a single custom CSS file.
Challenge
Allow a Design Studio application to use multiple CSS files.
Example Scenario: We would like to be able to combine an enterprise template CSS with an application specific CSS.
Solution
Use @import to import style rules from other style sheets.
Note: @import is generally discouraged in typical web development due to the sequential nature in which it loads as opposed to <link rel=”…> which downloads style sheets in parallel. Unfortunately, we do not have access to embed raw HTML hence the need for @import.
Approach #1 – Relative (Local & BI Launch Pad)
Path of least resistance 
. The benefit of this approach is that it will work both when running your application locally (i.e. localhost) and via BI Launch Pad.
Step 1
Setup your application specific CSS to use @import. In the example below we are referring to our template CSS via a relative path.
Step 2
Ensure both CSS files are in the same folder within BI Launch Pad (e.g. Public Folders\Design Studio Template (mimes)).
Approach #2 – Absolute (Local Only)
If your additional CSS is located in a completely distinct location within BI Launch Pad, you can explicitly refer to it using the syntax below.
URL: /aad/zen/mimes/[Application_CUID]/Root Folder/Design Studio Template (mimes)/template.css
To discover this location:
- Run application locally
- Open Chrome Developer Tools (CTRL + Shift + I)
- Navigate to your custom CSS via the Resources pane and “Open link in new tab”
- URL location will be visible in the address bar
Note: While this method works when running the application locally, the application fails to locate the CSS when executed from BI Launch Pad.
Approach #3 – Absolute (BI Launch Pad Only)
The following URL syntax allows us to explicitly refer to a CSS location that will work when the application is launched within BI Launch Pad.
URL: /BOE/portal/1501220001/zenwebclient/zen/mimes/[Application SI_ID]/Root Folder/Design Studio Template (mimes)/template.css
Similarly, Chrome Developer Tools was used to discover the location (albeit a different resource path).
