javascript - 通过 npm 更改为使用 bootstrap

Question

我正在开发一个目前使用 Bootstrap 的项目。然而，这是通过将 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 文件，包括导入各种 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";

我已经在package.json中添加了bootstrap并运行了npm install，所以在node_modules文件夹中有bootstrap，但是无法获取使用新文件运行的项目。我试过把

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');