我尝试通过meteor npm install bootstrap将Bootstrap添加到我的项目中.然后我添加了几个带有类行和col-md-3的div来测试它是否正常工作,我没有看到我的期望(我没有看到网格布局).我在body标签内创建了这些div,它在名为./imports/ui/body.html的文件中声明.也许我错过了来自’meteor / bootstrap’的import {Bootstrap},从’bootstrap’导入{bootstrap}(我尝试过,但没有成功)或类似或导入’../../node_modules/bootstrap/ somefile”.
我试过meteor add twbs：bootstrap和app按预期工作(适合那些col-md-3的网格布局).
This thread建议使用NPM.也许我错过了一些重要的东西,以便通过NPM与流星1.3一起工作？
我的HTML代码没什么特别的(当添加meteor包twbs：bootstrap时工作).唯一的怪癖是HTML代码在imports /目录中的文件中,所以我可能错过了关于loading process的重要内容.
看到@ loger9和@benjaminos答案后编辑.
我做了meteor npm install –save bootstrap并获得了一个新的node_modules目录.以防我再次运行npm install和meteor,强制在启动时执行任何进程. body.html和body.js住在进口/ ui. body.html是
<body>
<div class="container page-wrap">
<div class="page-header">
<h1>A title</h1>
</div>
<div class="row">
<div class="col-md-3" style="background: red;">
Lorem Ipsum
</div>
<div class="col-md-3" style="background: lavenderblush;">
Lorem Ipsum
</div>
</div>
</div>
</body>
和body.js包括
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css'; import './body.html';
但它抱怨它找不到模块../../node_modules/bootstrap/dist/css/bootstrap.min.css(如果我cd到进口/ ui目录,从那里我cat ../../node_modules /bootstrap/dist/css/bootstrap.min.css我看到了这个文件,所以它看起来不像那个路径不正确的问题)并且不会显示任何内容.
从’bootstrap’添加导入引导程序似乎没有任何效果. client / main.js也导入’../imports/ui/body.js’;
我实际上知道这应该像loger9在他们的答案中指出的那样容易,但由于某种原因我不能让这个工作.
解决方法
安装
meteor add fourseven:scss meteor npm install bootstrap-sass --save
导入到您的代码
> client / main.scss(注意.scss扩展名)：
@import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
> client / main.js：
import 'bootstrap-sass';
Glyphicons的解决方法
我发现Glyphicons字体的唯一解决方案是将fonts文件夹复制到public /：
cp -avr node_modules/bootstrap-sass/assets/fonts public/
注意它是如何在Meteor中加载的(/ fonts / bootstrap,即它需要在公共文件夹中)：
@font-face {
font-family: 'Glyphicons Halflings';
src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot");
src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot?") format("embedded-opentype"),url("/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("/fonts/bootstrap/glyphicons-halflings-regular.svg") format("svg");
}
可选步骤：Autoprefixer
根据fourseven:scss,autoprefixer最好作为单独的插件安装：
# optional meteor remove standard-minifier-css meteor add seba:minifiers-autoprefixer