通过npm更改为使用bootstrap

Question

我正在开发一个目前使用bootstrap的项目.但是,这是通过将引导程序文件加载到子目录中完成的.我想转向使用npm,这样可以更容易地保持最新状态.

我们现有的style文件夹包含bootstrap并source作为子文件夹+ index.js文件:

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;

在源文件夹中,我们有许多.less文件,包括company-root.less导入各种较少文件的文件:

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

我已经添加了bootstrap package.json并运行npm install,因此在node_modules文件夹中有引导程序,但无法让项目与新文件一起运行.我试过推杆

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

进入index.js 这给了我一个错误:

TypeError: Cannot set property 'emulateTransitionEnd' of undefined
    at C:\Users\Dee\Documents\GitHub\MAPS\node_modules\bootstrap\js\transition.js:36:29

我已经尝试将第一行更改company-root.js为:

@import (npm) "bootstrap";

要么

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

但这只会导致没有格式化.

我花了三个小时拖网,但没有取得任何进展.有人可以帮我吗？

Answer 1

我认为你必须使用像 bootstrap-sass-loader 或 bootstrap-webpack这样的库。

这在某些情况下有效，但不适用于所有 webpack 配置

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