文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Node项目中包含Bootstrap

问如何在Node项目中包含Bootstrap
EN

Stack Overflow用户

提问于 2016-06-11 11:42:25

回答 1查看 20.9K关注 0票数 17

我有一个使用基本npm命令搭建的MEAN堆栈项目。目前，Bootstrap是使用CDN包含的：

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')

我的问题是，我如何使用npm添加bootstrap，以便项目与CDN inclusion一样工作。特别是，当我运行

npm install bootstrap

将在node_modules中创建引导目录。但是，如果我尝试包含该目录中的bootstrap.css，它会破坏字形图标字体。有没有人能建议一下怎么做呢？

另外，关于AngularJS本身，我也会提出同样的问题。

twitter-bootstrap

npm

npm-install

javascript

node.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-11 11:52:14

您可以使用浏览器包管理器，即

Bower为前端包管理问题提供了一种通用的、非固执己见的解决方案，同时通过API公开了包依赖模型，该API可供更具主观性的构建堆栈使用。没有系统范围的依赖关系，不同的应用程序之间没有共享依赖关系，依赖关系树是扁平的。

如果你想了解更多关于哪个更好更可靠的知识，你也可以阅读这个link。

npm和Bower之间的主要区别在于安装包依赖项的方法。npm分别为每个包安装依赖关系，因此会生成一个大的包依赖关系树(node_modules/grunt/node_modules/glob/node_modules/...)，其中可能有同一个包的多个版本。对于客户端JavaScript来说，这是不可接受的:您不能将两个不同版本的jQuery或任何其他库添加到一个页面。对于Bower，每个包只安装一次(jQuery将始终位于bower_components/jquery文件夹中，而不管有多少包依赖于它)，并且在发生依赖冲突的情况下，Bower不会安装与已经安装的包不兼容的包。

Bower安装

您只需简单地安装这些包

语法

npm install -g bower

您可以参考了解完整的信息。

为例：

目录结构

project Folder
  + bower_components
     + bootstrap
       + dist
         + css
           + bootstrap.css
     + jquery
       + jquery.js
  + public
    + index.html
  + app.js

现在您可以在app.js中设置静态路径

app.use(express.static(path.join(__dirname, 'bower_components')));

现在您只需在index.html文件中使用即可

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>

截图

包含app.js文件的目录结构

普通Html文件

票数 19

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37759681

复制

相似问题

问如何在Node项目中包含Bootstrap
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Node项目中包含BootstrapEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Node项目中包含Bootstrap
EN