Skip to Content

Unable to load custom css in Fiori Extension

May 15, 2017 at 01:52 PM


avatar image

Hi ,

I have a fiori extension running on HCP WebIDE. I have to include a custom css file in my extension.

I have created a css folder inside webapp and have given the following path in my metada of extended component. But in console I see it tries to find the file in my parent app (standard app) instead of extended app.


metadata: {
version: "1.0",                   
includes: ["css/StyleExt.css"],                          
config: {},
css-1.png (6.2 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

avatar image
Former Member May 16, 2017 at 12:22 PM

Hi Amber,

To apply the custom CSS style sheet to the app, add the below code in the index.html file.

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

css is the folder name.

style.css is the file name which has been created under the css folder.

Best Regards,


Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Deepak,

Actually there is no index.html in this case as its an Extension project in Webide. We are running through WebIDE sandbox where-in it generates fiorisandbox.html at runtime. So I was thinking if there is anyway we can do it the metadata settings of my Component.

Also when I will finally deploy this extensed proj to ABAP server later and it will run from launchpad , that time it will not refer our index.html or fiorisandbox.html and in that case the css path will not be loaded