Use CSS style on HANA Cloud Platform

[henk_oosterhuis]

We have created a SAPUI5 application in which we use CSS. This works fine in the Web IDE (see screenshot).

However when we deploy the application to the SAP HANA Cloud Platform CSS doesn't seem to work (see second picture).

I think this has to do with the relative path to the CSS file. Next picture shows the structure of our application.

In the index file we link the CSS file.

<link rel="stylesheet" type="text/css" href="css/style.css">

In the controller of our view we define for example the Red number field and the Amber number field.

var oTextviewRed = new sap.ui.commons.TextView({

                                text : "3",

                                design: sap.ui.commons.TextViewDesign.H1

                            }).addStyleClass("fontred");

var oTextviewAmber = new sap.ui.commons.TextView({

                                text : "37",

                                design: sap.ui.commons.TextViewDesign.H1

                            }).addStyleClass("fontamber");

Does anyone has an idea how to solve this CSS issue in the HANA Cloud Platform?

Thank in advance.

[henk_oosterhuis · Accepted solution]

In the WEB Ide the app is started with the index file in which the link to the css file is made.

However when the app is started from the launchpad in HANA Cloud Platform the system starts the app with the component.js file. In the component.js just add the file to the includes and it will work fine.

Regards,

Henk

[scott_stefanich]

Hello Henk,

If the css file is small, would you consider using inline CSS in the index.html?

Doing so reduces the number of network requests and unblocks rendering due to CSS being treated as a render blocking resource.

Regards,

Scott

[henk_oosterhuis]

Hello Scott,

Thanks for your reaction. I moved the CSS styling to the index file and unfortunately the result is still the same. In the Web IDE it works fine but on the HANA Cloud Platform still no colors are visible.

Regards,

Henk