Enable the jQuery, Bootstrap4 & font awesome for the SPFx

Step 1: Create SPFx

yo @microsoft/sharepoint –solution-name “jquery-spfx” –component-name “jqueryspfx-wp” –component-description “This webpart will use the jQuery, bootstrap and font awesome.” –component-type “webpart” –framework “none” –environment “spo” –package-manager “npm” –skip-feature-deployment

Step 2: Install additional packages

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

npm shrinkwrap

npm install url-loader –save-dev

Step 3: Config.json

“externals”: {

    “jquery”: {

      “path”: “node_modules/jquery/dist/jquery.min.js”,

      “globalName”: “jQuery”

    },

    “bootstrap”: {

      “path”: “node_modules/bootstrap/dist/js/bootstrap.bundle.min.js”,

      “globalName”: “bootstrap”,

      “globalDependencies”: [

        “jquery”

      ]

    }

  }

Step 4: Gulpfile.js

const build = require(‘@microsoft/sp-build-web’);

build.configureWebpack.mergeConfig({

    additionalConfiguration: (generatedConfiguration) => {

        generatedConfiguration.module.rules.push({

            test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,

            loader: ‘url-loader’,

            query:{

                limit:10000,mimetype:‘application/font-woff2’

            }

        });

        return generatedConfiguration;

    }

});

https://blog.kloud.com.au/2017/07/06/spfx-bootstrap-react/

Step 5: webpart ts file

import * as $ from “jquery”;

import * as bootstrap from “bootstrap”;

require(‘../../../node_modules/bootstrap/dist/css/bootstrap.min.css’);

require(‘../../../node_modules/@fortawesome/fontawesome-free/css/all.min.css’);