Adding a theme from another directory

[realfunkyusername]

Hello,

I would like to add a theme which is not a standard theme and thus not located in sap/ui/core/themes/ how would I go about doing this?

I tried to add my theme path to the rootPaths Array but with no success. Thanks in advance.

[cevou]

Hey,

can you please let me know what information you passed to the theme options property as well as which path your theme is in and what you added to the rootPaths?

[realfunkyusername]

Hey @cevou,

thanks for replying so fast! My theme is located in: www/style/custom_theme. I added custom_theme to the theme property and ./www/style/ to the rootPaths array. Maybe I misunderstood something basic about what I should provide in those?

Thanks for your help, it is greatly appreciated and I wish you happy easter days! 😄

[cevou]

The openui5-webpack-plugin uses the less-openui5 library to build the themes. So for every library that is defined, it will try to use the library.source.less file to build the theme.

Example sap.ui.core: it will try to find sap/ui/core/themes/custom_theme/library.source.less

To find this will it will use all directories defined in rootPaths as base directories. All rootPaths are relative to the directory in which the webpack.config.js file is located. So if you config file is in your projects root directory and the theme in the www/style subdirectory you would add this to the rootPaths.

[realfunkyusername]

Thanks for getting back to me! That explains it. I think the source.less file got lost somewhere so I will try to get back to the person who created it originally. Is there a way to use the loader with an already transpiled custom css theme?

Thanks!

[cevou]

Yes, you can use for example the CopyWebpackPlugin to just copy the file to the directory, for example: sap/m/themes/custom_theme/library.css. There should be a library.css file for every library used by the application.

I will close this, as this is not a bug of this plugin.