Unable to load custom css in Fiori Extension

[amber_garg]

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.

css-1.png

this.i2d.pp.materialshortge.details.Component.extend("i2d.pp.materialshortge.details.ZPP_MATSHORT_DT_Ext.Component",    
 {
metadata: {
version: "1.0",                   
includes: ["css/StyleExt.css"],                          
config: {},

[former_member242845]

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,

Deepak.

[amber_garg]

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

Regards