Fluentui: Fabric UI Grid-System stylesheets aren't loading.

[Kenn-o]

Description:

1. We are currently using Fabric UI Grid styles in our SPFx Web Part Code. It is a project involving developing SharePoint Framework Web parts from SharePoint online. Our client is using the React Framework.
2. We've enabled the legacy Fabric UI styles in our Web Part Manifest Files
3. Fabric Ui Grid system style sheet are only loaded when we manually refresh the pages.
4. This has been working for the last few weeks. We've noticed this problem in the last 72 hours. We are seeing similar issues on multiple O365 tenants.

Environment Information

WebPart Manifest

Package Information
"dependencies": {
"@microsoft/sp-core-library": "1.9.1",
"@microsoft/sp-lodash-subset": "1.9.1",
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
"@microsoft/sp-webpart-base": "1.9.1",
"@pnp/polyfill-ie11": "^1.0.2",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/smoothscroll-polyfill": "^0.3.1",
"@types/webpack-env": "1.13.1",
"mdn-polyfills": "^5.19.0",
"office-ui-fabric-react": "7.61.1",
"react": "16.8.5",
"react-dom": "16.8.5",
"smoothscroll-polyfill": "^0.4.4"
},
"resolutions": {
"@types/react": "16.8.8"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.9": "0.7.16",
"@microsoft/sp-build-web": "1.9.1",
"@microsoft/sp-module-interfaces": "1.9.1",
"@microsoft/sp-tslint-rules": "1.9.1",
"@microsoft/sp-webpart-workbench": "1.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "~3.9.1"
}
}

HTML Code

How it would look like from a Browser

Before Refresh(Browser)

After refresh (Browser)

[Kenn-o]

Update

We've found a temporary fixes by applying the following line to our CSS file:

:global{ @import "../../../../node_modules/office-ui-fabric-react/dist/css/fabric.min"; }

However, it has increased the page size by 1MB (because we have 4 x web parts @ 25kb each) for our SharePoint project. Hence, it would be great if we can drill down to the root cause and get a proper fix for this issue.

[TietjeDK]

Any updates here? This is a major issue for our clients.

[davevh]

We have the same problem that the grid system is not working anymore.

[aneeshack4]

@Kenn-o @TietjeDK @davevh There haven't been any recent changes to the Grid code in Fabric - the last change to Grid.base.tsx was 18 months ago (and the other files, last changes were 22 months ago). Is it possible that something within Sharepoint webparts was changed?

[aneeshack4]

Spoke with Kevin offline - looks like there's work being done to solve the root problem in Sharepoint so I'll close this. If y'all find that it turns out to be a problem in Fabric, feel free to ping us on here again.

[Kenn-o]

I've removed the following line(the interim solution) from our code:

:global{ @import "../../../../node_modules/office-ui-fabric-react/dist/css/fabric.min"; }

Re-deployed the WebParts to our dev environment. I can confirm the solution is now resolved. :)

[KevinTCoughlin]

The problem was surfaced from the SPFx / SPO side. We've since reverted the change which caused the regression. Let's continue discussion in this issue if you are still facing the above issue (you shouldn't be): https://github.com/SharePoint/sp-dev-docs/issues/4911