In the recent blog post on how to make a web part works with different section backgrounds using CSS variables, I already covered. At the same time, this works perfectly for just regular web parts. There are specific scenarios, where this approach fails.
Over the last couple of days, I banged my head against the wall. I hate when things don’t work as expected. On the other hand, I love challenges.
The thing we are talking about the documentation on “Supporting section background“. To be clear, the documentation is correct. It works as described. The issue I and many others have with this documentation it does not apply to your project.
When you write a web part, that don’t use Fluent UI or its predecessor Office UI Fabric, you might have recognised Segoe UI from SharePoint is not loaded there.
Following the instruction on how to create a library component, get you pretty easy up and running to try out this new feature.
To make it production-ready you have to do some manual steps and tweaks. Here are some suggestions.
SharePoint Framework offers you a pretty solid project setup, but on the other hand, it doesn’t give you options to optimise the gulp, build or the webpack configuration.
The more web parts exist in a single project, the slower the build task become and all the code in the project will be compiled at once, instead of smaller incremental builds. Technical possible but not yet supported.
The good thing is that there are some options you can directly trigger from your web part code. Some of these options affect webpack others can be applied in ReactJS. Not only in case of build times but also case of user experience and web part performance.
The following configuration shows the webpack.js generated during the build process of a SPFx
Hello World wep part. References to fixed path in the generated webpack config were replaced with the default way of resolving path. (
If you try to log something in your SPFx project, it can be tough to find your ‘console.log’ messages. SharePoint Framework, in that sense, is chatty.
Consider the following simple scenario. You like to write a new SPFx web part, and you have the requirement to show a popup or a flyout container opened from a web part. This flyout menu should overlay whatever comes after your web part.