2

SharePoint Framework currently takes my .scss files and changes all class names by adding IDs like this: floatRight_789b4d6f. I understand this is done to isolate the styling within the web part but it messes up styling where I don't control the CSS.

Let's say I'm using an external JavaScript library that generates HTML as well as specific CSS class names (I don't control these). I need to style these elements and therefor cannot use the "mangled" class names the SharePoint Framework gives me. I need to use exactly the class names as they are generated by the external library (so floatRightfor the above sample).

Sample

HTML generated by external library:

<div class="floatRight">...</div>

Good. I need to style the floatRight class.

This is in my scss file:

.floatRight {
    float: right;
    margin-left: 10px;
}

But this is generated in the scss.ts file:

const styles = {
  floatRight: 'floatRight_789b4d6f'
};

And my style is not applied to the element.

Question

How to get rid of the IDs? How can I disable this class name rewriting for certain .scss files? Or is there an alternative approach that is recommended here?

1

You can use the SPComponentLoader.loadCss method to load your external css files.

Add the below import statement:

import { SPComponentLoader } from '@microsoft/sp-loader';

After that in your constructor, you can use it as below:

public constructor() {
 super();    
 SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
}

This will load the css as it is and you can use the class names that are provided by the external library.

  • The CSS file will be part of my bundle. Is this method applicable for CSS files contained in the (webpack) bundle? – Heinrich Ulbricht Mar 14 '17 at 10:27
  • Yes i think it should work. Just ensure that css path is valid. – Gautam Sheth Mar 14 '17 at 10:50
  • It does not seem to work for modules, or some additional action is required to add CSS files as modules :-/ – Heinrich Ulbricht Mar 21 '17 at 15:07
1

Try wrapping your CSS in a :global block like this:

:global {
    .floatRight {
        float: right;
        margin-left: 10px;
    }
}
1

Update 1: Remove the ".module" from your file name to disable rewriting of CSS class names.

See here for details: http://www.n8d.at/blog/how-to-handle-automatic-css-class-renaming-in-spfx/

Update 2: There is now official documentation about these so-called "CSS modules" and the .module extension: https://dev.office.com/sharepoint/docs/spfx/css-recommendations#use-css-modules-to-avoid-styling-conflicts


The solution for me was to add a new scss file to my project. The styles from this new scss file are not extended with IDs.

The (complete) generated scss.ts file looks like this:

/* tslint:disable */
require('./NameOfMyFile.css');

/* tslint:enable */

That's it. No styles variable. No IDs.

I include the style file in my view model like this:

require('./NameOfMyFile.scss');

All good.

  • That wormks great! Thanks. Way easier than loading from a cdn – russellg Oct 20 '17 at 14:51

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.