Die*_*ego 8 npm twitter-bootstrap meteor
这是我的理解是流星1.3恩惠NPM包过流星/大气包.
我试图通过自己的项目添加 Bootstrapmeteor npm install bootstrap.然后我添加了几个div与类,row并col-md-3测试它是否工作,我没有看到我期待什么(我没有看到网格布局).我在body标记内创建了这些div ,它在一个名为的文件中声明./imports/ui/body.html.也许我缺少一个import {Bootstrap} from 'meteor/bootstrap',import {bootstrap} from 'bootstrap'(我试过了,没有成功)或类似的或import '../../node_modules/bootstrap/somefile'.
我试过meteor add twbs:bootstrap,应用程序按预期工作(适合那些网格布局col-md-3).
该主题建议使用NPM.也许我错过了一些重要的东西,以便通过NPM与流星1.3一起工作？
我的HTML代码没什么特别的(当添加meteor包twbs:bootstrap时工作).唯一的怪癖是HTML代码在imports/目录中的文件中,所以我可能错过了一些关于加载过程的重要信息.
看完@ loger9和@benjaminos答案后编辑.
我做了meteor npm install --save bootstrap并获得了一个新的node_modules目录.万一我运行npm install,并meteor再次,强制在启动时进行任何处理.body.html和body.js住在imports/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我看到的文件,所以它看起来不是那条路径不正确的问题)并且不会显示任何内容.
添加import bootstrap from 'bootstrap'似乎没有效果.client/main.js也是import '../imports/ui/body.js';
我实际上知道这应该像loger9在他们的答案中指出的那样容易,但由于某种原因我不能让这个工作.
我在Sergio Tapia的博客文章中找到了解决方案.它适用于Meteor 1.3.2.2或更高版本.这些步骤对我有用(支持SASS/SCSS):
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字体的唯一解决方案是将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");
}
每个fourse:scss,autoprefixer应该最好作为一个单独的插件安装:
# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer
首先你必须通过npm安装bootstrap:
meteor npm install --save bootstrapbootstrap-sass如果你想要sass版本(我个人的选择),或同样的事情.
如果您安装了标准版本
您必须从包中导入CSS文件,例如,您的imports/startup/client/index.js文件,以确保它将在客户端启动时加载.
如果您安装了'bootstrap-sass'
你可以创建一个'main.scss'文件并指向boostrap.scss包中(它应该在'/ node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss'中).
所以它看起来像这样.
客户机/ main.scss
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
这增加了好处.您可以从此文件中的任何位置继续堆积scss,并控制css加载顺序.例如,您可以在导入中创建一个sass目录,创建一个index.sass文件,然后将其添加到main.scss中.在我看来,它非常整洁.
你怎么加载JS呢？
import bootstrap from 'bootstrap'
要么
import bootstrap from 'bootstrap-sass'
这就是你导入npm包的方式.
编辑:显然这对每个人都不起作用,但在Meteor 1.3.2.2中他们似乎已经解决了这个问题.现在你可以(真的)从npm包导入sass和更少的文件.
@import '{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
像这样导入应该可以解决这个问题.