Node.js: v10.16.0
SPFx: 1.9.1
Bootstrap & Font Awesome are my mandatory libraries to build any site on SharePoint Online. I used it often to customise the look of SharePoint using the content editor webpart with js & css. When I tried to migrate my code to SPFx one of the challenge I faced was how to install those in the solution. Well we have several choices to add those in the framework
Before adding libraries please go through this Link from Microsoft Docs to understand how those external dependencies are loaded and handled within SPFx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Global Reference Approach:
In the below code I used the global option to load those libraries so that multiple webparts can make use of the libraries.
Step :1
After finished creating the WebPart solution using Yo generator install the bootstrap and font awesome using the below
npm install jquery --save npm install @types/jquery --save-dev npm install bootstrap@4 --save npm install @types/bootstrap@4 --save-dev npm install --save @fortawesome/fontawesome-free
Step:2
Add external references to the config.json file
Locate the config.json file under the config folder and add the below entry to the file
"externals": { "jquery": { "path": "node_modules/jquery/dist/jquery.min.js", "globalName": "jQuery" }, "bootstrap": { "path": "node_modules/bootstrap/dist/js/bootstrap.min.js", "globalName": "bootstrap" } }
Step 3:
Font awesome is not recognised by default by the webpack, so the gulp has to recognise the font format before it loads it to the solution. Run the below command to install the url loader
npm install url-loader --save-dev
After installing add the below to the gulp.js file which is at the root folder
'use strict'; const gulp = require('gulp'); const build = require('@microsoft/sp-build-web'); build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); build.configureWebpack.mergeConfig({ additionalConfiguration: (generatedConfiguration) => { generatedConfiguration.module.rules.push( { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: { loader: 'url-loader' } } ); return generatedConfiguration; } }); build.initialize(gulp);
Step 4:
Now add the entry into the .tsx file to reference the bootstrap CSS & JS and the font awesome CSS
import * as jQuery from "jquery"; import * as bootstrap from "bootstrap"; require('../../../../node_modules/bootstrap/dist/css/bootstrap.min.css'); require('../../../../node_modules/@fontawesome/fontawesome-free/css/all.min.css');
Pingback: SPFx Webpart using jQuery Plugin & Bootstrap – Senthamil
this solution is not working in my project
What error you getting ? Or which part is not working ?
i followed the same order in my spfx extension but not working, it is not showing any error it seems jquery is not taking
I have created a detailed video please check and let me know it works https://youtu.be/xnlodd-ZSCg
change to :
npm install –save @fortawesome/fontawesome-free
I updated, Thank you
hmmm…doesnt work for me. the bootstrap loads, but the icons are being blocked.