spfx office fabric ui CSS is not working

Question

I just now upgraded SPFX from 1.7.1 to 1.8.2. I have referred office fabric UI css class like ms-grid, ms-GridRow, ms-u-md6 etc... before upgrading everything is working fine. But know office fabric UI is not at all coming. Any CSS from SPFabricore.scss is not getting into the page. I guess it is not importing any CSS from here.

I tried creating a new solution and checked the same issue happening in new solutions also. verion details as below

node version 10.16.0

npm version 6.9.0

+-- @microsoft/[email protected]

+-- [email protected]

`-- [email protected]

Old package.json

{
  "name": "optegra-spfx-webparts",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.7.1",
    "@microsoft/sp-lodash-subset": "1.7.1",
    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
    "@microsoft/sp-webpart-base": "1.7.1",
    "@pnp/common": "^1.2.9",
    "@pnp/logging": "^1.2.9",
    "@pnp/odata": "^1.2.9",
    "@pnp/sp": "^1.2.9",
    "@types/es6-promise": "0.0.33",
    "@types/googlemaps": "^3.30.16",
    "@types/webpack-env": "1.13.1",
    "jquery": "^3.3.1",
    "moment": "^2.24.0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.7.1",
    "@microsoft/sp-module-interfaces": "1.7.1",
    "@microsoft/sp-tslint-rules": "1.7.1",
    "@microsoft/sp-webpart-workbench": "1.7.1",
    "@types/chai": "3.4.34",
    "@types/jquery": "^3.3.29",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1"
  }
}

New package.json

{
  "name": "optegra-spfx-webparts",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "1.8.2",
    "@microsoft/sp-lodash-subset": "1.8.2",
    "@microsoft/sp-office-ui-fabric-core": "^1.8.2",
    "@microsoft/sp-property-pane": "1.8.2",
    "@microsoft/sp-webpart-base": "1.8.2",
    "@pnp/common": "^1.3.3",
    "@pnp/logging": "^1.3.3",
    "@pnp/odata": "^1.3.3",
    "@pnp/sp": "^1.3.3",
    "@types/es6-promise": "0.0.33",
    "@types/googlemaps": "^3.36.4",
    "@types/webpack-env": "1.13.1",
    "jquery": "^3.4.1",
    "moment": "^2.24.0"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
    "@microsoft/sp-build-web": "1.8.2",
    "@microsoft/sp-module-interfaces": "1.8.2",
    "@microsoft/sp-tslint-rules": "1.8.2",
    "@microsoft/sp-webpart-workbench": "1.8.2",
    "@types/chai": "3.4.34",
    "@types/jquery": "^3.3.29",
    "@types/mocha": "2.2.38",
    "ajv": "^5.2.5",
    "gulp": "~3.9.1"
  }
}

Answer 1

You need to add and set the property loadLegacyFabricCss to true in your webpart's manifest.json file.

The value needs to be set as below:

"loadLegacyFabricCss": true,

So, your <webpart>.manifest.json file will look something like:

"alias": "Test182WebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],
  "loadLegacyFabricCss": true,

  "preconfiguredEntries": [{
  //code omitted for brevity

Reference - Deprecating legacy Fabric CSS consumption