Geek Answers Handbook

Switching to using bootstrap via npm

I am working on a project that is currently using bootstrap. However, this was done by loading the boot files into a subdirectory. I would like to move on to using npm, as this will greatly facilitate the upgrade.

In our existing style folder there is bootstrap and source as subfolders + 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;

In the source folder, we have several .less files, including company-root.less , which imports various smaller files:

 @import "./bootstrap/bootstrap.less"; @import "./variables/all.less"; @import "./variables/company.less"; @import "./customcss.less"; @import "./subnav.less"; @import "./nav-list.less";

I added bootstrap to package.json and ran npm install , so I have bootstrap in the node_modules folder, but cannot make the project work with new files. I tried to put

 var $ = require('jQuery'); global.jQuery = $; require('bootstrap');

in index.js This gives me 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 tried changing the first line of company-root.js to:

 @import (npm) "bootstrap";

OR

 @import "../../node_modules/bootstrap/less/bootstrap.less";

but it just does not lead to formatting.

I spent three hours etching the net, but made no progress. Can anybody help me?

+6
source share
2 answers

I think you need to use a library like bootstrap-sass-loader or bootstrap-webpack .

This works in some cases, but not in all webpack configurations.

 global.jQuery = global.$ = require('jquery'); require('bootstrap');
0
source

I also got this error. I was working on a small demo that needed to be loaded in HTML, and I tried to load the boot file into a .js file using require(bootstrap) .

I removed require(bootstrap0 from the .js file.

I went into my HTML and simply added a bootstrap to <head> as follows:

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

My .js file is:

 var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); global.jQuery = require('jquery');

Developed my project and it worked great. The error has disappeared. I understand that this may not be what you were looking for, but I wanted to post my decision in case someone else gets this error message.

0
source

More articles:


All Articles