0

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?

  • Where in your project are you storing that .scss file? Is it directly under the src folder? – willman Mar 13 at 20:06
0

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";
| improve this answer | |
  • Hi, the webpart-shared and the breakpoints are on a "shared" folder on src already, but I will combine both and try it that way. I dont think this is going to resolve though, because I've isolated one of the webparts css into its own scss file, and still I'm getting the weird behavior. – André Alves Mar 16 at 9:34
  • Just tried your approach and it didn't work, Im trying to find out if it could be a change on the SPFx theme scheme or such. – André Alves Mar 16 at 10:52

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.