SPFx v1.4.1 sp-office-ui-fabric-core styles not rendered/loaded

[cperson]

Category

• [x ] Question
• Typo
• [x ] Bug
• Additional article idea

Expected or Desired Behavior

The following classes referenced in an SPFx 1.4.1 solution would render appropriately :
ms-Grid-col
ms-sm3
ms-md3

Observed Behavior

Styles are not rendered based on classname.

This is happening as of 11/15/2019 at 2:00pm CST.

Steps to Reproduce

Create an SPFx v1.4.1 solution

Add the following line to you .scss:
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

Add any className from UI Fabric (i.e. ms-Grid-col)

Deploy solution and observe css is not rendered.

QUESTION:
Would it be possible to provide reference of CDN paths as it relates to SPFx and Office UI Fabric resources, or otherwise elaborate on how the styles are added to the markup?

We are attempting to root cause this issue with no luck, and the best reference we can find refers to Icons specifically. It would be nice to have docs regarding styles as well: https://github.com/OfficeDev/office-ui-fabric-react/wiki/using-icons

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Dangerous-Mind]

Same problem started two hours ago on one my my tenants on all my apps.
On another tenant based on another continent they are still working fine for now.
Spfx versions from 1.4.1 to 1.9.1.

[mmohamedbasith]

Slowly all tenants start seeing this issue. Root cause: old spfx solution having office fabric classes written directly in html markup.
Refer https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration
We can resolve this by rewriting the code to follow mixin systax for office fabric classes.

However it unfair to ask developers to rewrite previously working code which was written year ago and ask them now to rebuild the code all of sudden. So please provide support for 'global css syntax' for old version of code. Impose any new rule only for lastest version of the spfx solution

[patmill]

Digging into this. Is it possible to give some more info on tracking this down. Are there errors in the console? Are specific files not getting downloaded (check the network tab for 404s)? Do you have a small example of code that shows the issue?

[Dangerous-Mind]

My African tenant is back to normal. The European is still without css.
No 403 error.

@patmill
Some people usually use the ClassName= {"ms-Grid-col ms-sm12 ms-lg6"} syntax instead of doing include in scss and then applying it on the elements because is simpler and people don't have to load more css on to the page.
Now Microsoft removed that css.

Ex:
On the African Server they have:
.ms-SPLegacyFabricBlock .ms-lg6 {
width: 50%;
}
On the European server there is no definition on this class.

[mmohamedbasith]

@patmill Please let me know if you require any further information apart from @Dangerous-Mind given. Looking for a Quick resolution since most of these spfx solution will be on Production

[KevinTCoughlin]

@mmohamedbasith @Dangerous-Mind can you provide CDN URLs which are not serving the scoped selectors e.g. .ms-lg6 NOT .ms-SPLegacyFabricBlock .ms-lg6. That is unexpected; all CDNs should be serving scoped styles e.g. .ms-SPLegacyFabricBlock .ms-lg6.

Also, what does running the following JavaScript code on the impacted page(s) return:

document.querySelectorAll('.ms-SPLegacyFabricBlock')

The above should return a NodeList with length > 0. Those DOM Nodes should wrap the SPFx solutions so the scoped styles are applied.

The Fabric styles are scoped to the above .ms-SPLegacyFabricBlock selector.

If the CDN is serving the scoped styles as expected, then can you try a mitigation of appending the following className .ms-SPLegacyFabricBlock to your solution's root DOM Node?

[KevinTCoughlin]

Does anyone have an isolated SPFx 1.4.1 solution repro to expedite resolution?

[mmohamedbasith]

@KevinTCoughlin document.querySelectorAll('.ms-SPLegacyFabricBlock') gives zero nodes. However couple of hours ago i did saw SPFX webparts are wrapped with class 'ms-SPLegacyFabricBlock', not now.

No Apparent error in console. So I cannot find what is the CDN url missing .

[KevinTCoughlin]

@KevinTCoughlin document.querySelectorAll('.ms-SPLegacyFabricBlock') gives zero nodes. However couple of hours ago i did saw SPFX webparts are wrapped with class 'ms-SPLegacyFabricBlock', not now.

No Apparent error in console. So I cannot find what is the CDN url missing .

Is the content cached? SPFx solutions in latest release should be wrapped in the above selector as you saw a few hours ago.

Does manually appending .ms-SPLegacyFabricBlock to the DOM Node containing the SPFx solution mitigate the styling issue?

[mmohamedbasith]

.ms-SPLegacyFabricBlock

Yes manually appending class 'ms-SPLegacyFabricBlock' from developer tools, render fabric css properly.

However what i remember couple of hours ago was , i saw the class 'ms-SPLegacyFabricBlock' in webpart but the css not applied. Now i dont see the class 'ms-SPLegacyFabricBlock' in html And Contents are not cached . i removed all the cache and checked . still dont find the class.

[KevinTCoughlin]

I believe the following SPFx 1.4.1 WebPart sample solution exhibits the above mentioned problem: https://github.com/KevinTCoughlin/spfx-fabric-icons/blob/309ab6fafc381698d488fc021b7480dae8587026/src/webparts/helloWorld/HelloWorldWebPart.ts#L31

Is the above linked usage of Fabric Icon classNames similar to what is in-use in the regressed SPFx solutions?