Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
config
src/webparts/helloWorld
typings
.editorconfig
.gitattributes
.gitignore
.npmignore
.yo-rc.json
README.md
gulpfile.js
package.json
tsconfig.json

README.md

add-custom-styles

This sample demonstrate how to load third-party css into SharePoint Framework Webparts (SPFx)

Building the code

git clone the repo
npm i
npm i -g gulp
gulp

How to do it?

Referencing external CSS files from a URL is different than referencing resources from within your project.

The SharePoint Framework provides you a way of importing external resources, but it only works for javascript libraries. (config.json file). However, if you need to reference external CSS, i.e Bootstrap, you should use the SPModuleLoader class instead.

The first thing to do is to import the SPComponentLoader by doing this:

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

and then load the resources you'd need

  constructor() {
    super();

    // load bootstrap css
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
  }

When you open the page, you'll see that the bootstrap.min.css was successfully loaded. boostrap loaded

and the bootstrap layout will be applied to your WebPart

WebPart