I am currently working on a project that utilizes Bootstrap. However, the Bootstrap files are being loaded into a subdirectory. I would like to transition to using npm for easier maintenance and updates.
Within our existing style folder, we have subfolders for bootstrap and source, along with an index.js file:
var ms = require('ms');
var join = require('path').join;
var less = require('transform')('less');
var express = require('express');
var app = express();
.............*other code*
app.get('/bootstrap.css', less(join(__dirname, 'source',
process.env.COMPANY_ID + '-root.less')));
app.get('/print.css', less(join(__dirname, 'source',
process.env.COMPANY_ID + '-print.less')));
module.exports = app;
The source folder contains several .less files, including a company-root.less which imports various other less files:
@import "./bootstrap/bootstrap.less";
@import "./variables/all.less";
@import "./variables/company.less";
@import "./customcss.less";
@import "./subnav.less";
@import "./nav-list.less";
I have added Bootstrap to package.json and ran npm install, which places Bootstrap in the node_modules folder. However, I am experiencing issues getting the project to run with these new files. I tried adding
var $ = require('jQuery');
global.jQuery = $;
require('bootstrap');
to index.js. This resulted in an error:
TypeError: Cannot set property 'emulateTransitionEnd' of undefined
at C:\Users\Dee\Documents\GitHub\MAPS\node_modules\bootstrap\js\transition.js:36:29
I also attempted changing the first line of company-root.js to:
@import (npm) "bootstrap";
OR
@import "../../node_modules/bootstrap/less/bootstrap.less";
Both of these changes led to no formatting being applied. Despite researching online for three hours, I am unable to make any progress. Can someone please offer assistance?