2

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/generator-sharepoint@1.8.2

+-- gulp@4.0.2

`-- yo@2.0.6

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"
  }
}
  • can you post the package.json file ? – Gautam Sheth Jun 13 at 15:00
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.