SPFx Loading indicator not working when solution is deployed on SharePoint Online

Question

I'm fair new to SPFx and I was tasked to consolidate some webparts there were previously in different solutions into one spfx solution including all of them, I started with 4 webparts, in all of them I'm importing a common class called webpart-shared.module.scss and there I have the following:

@import "./breakpoints.scss";

:global{
    label {
      margin-bottom: 0px;
    }
    .btn {
      border-radius: 0;

      &.btn-primary {
        background:#004571;
        border-color:#004571;
        color:#ffffff;
      }
    }
}

The purpose of the above was to inject these as global in all webparts, so in every webpart I import this file, which seems to be working fine when running locally on the workbench (localhost and on https://mysposite.sharepoint.com/_layouts/15/workbench.aspx) all works fine and the CSS seem to be all OK, but as soon as I deploy into SharePoint Online all webparts CSS don't seem to behave the same, for instance I'm getting a white background coming from a boostrap file _reboot.scss which does not happen when running locally. This is not happening on the previous solutions/webpart, I already review all their code but nothing seems to differ apart from the common global I've created (posted above).

The webparts are always displayed 1 per page, so I don't think this is coming from conflicts between them.

I'm also using the display/clear loading indicator (which wasn't in use previously), would that ave some impact on this?

Answer 1

I would recommend creating a folder named "shared" directly under your "src" folder (so that it is a peer-level folder with "webparts"). Then place your "breakpoints.scss" file and "webpart-shared.module.scss" (and potentially any other shared files).

Then in each of your webparts/yourwebpart/components/yourwebpart.module.scss, you can import it with

@import "../../webpart-shared.module.scss";