如何在Meteor 1.3中通过NPM使用引导程序? [英] How use bootstrap via NPM in Meteor 1.3?
问题描述
据我了解，Meteor 1.3相对于 Meteor/atmoire 软件包更偏爱 npm 软件包.
It is my understanding that Meteor 1.3 favors npm packages over Meteor / atmosphere packages.
我试图通过meteor npm install bootstrap将 Bootstrap 添加到我的项目中.然后，我添加了两个带有类row和col-md-3的div来测试它是否正常工作，但我没有看到期望的结果(我没有看到网格布局).我在body标记内创建了这些div，该标记在名为./imports/ui/body.html的文件中声明.也许我错过了import {Bootstrap} from 'meteor/bootstrap'，import {bootstrap} from 'bootstrap'(我尝试过但没有成功)或类似的产品或import '../../node_modules/bootstrap/somefile'.
I tried to add Bootstrap to my project via meteor npm install bootstrap. Then I added a couple divs with classes row and col-md-3 to test it was working and I did not see what I was expecting (I did not see the grid layout). I created those divs inside the body tag, which is declared on a file called ./imports/ui/body.html. Maybe I'm missing an import {Bootstrap} from 'meteor/bootstrap', import {bootstrap} from 'bootstrap' (which I tried, with no success) or similar or an import '../../node_modules/bootstrap/somefile'.
我尝试了meteor add twbs:bootstrap，并且该应用程序按预期工作(那些col-md-3的网格布局正确).
I tried meteor add twbs:bootstrap and the app worked as expected (proper grid layout for those col-md-3).
This thread recommends using NPM. Maybe I missed something important in order to make it work via NPM with meteor 1.3?
我的HTML代码没有什么特别的(并且在添加流星包twbs:bootstrap时有效).唯一的怪癖是HTML代码位于imports/目录中的文件中，因此我可能错过了有关加载的重要信息处理.
My HTML code has nothing special (and worked when adding the meteor package twbs:bootstrap). The only quirk is that the HTML code is in a file in the imports/ directory, so probably I missed something important about the loading process.
在看到@ loger9和@benjaminos答案后进行编辑.
Edits after seeing @loger9 and @benjaminos answers.
我做了meteor npm install --save bootstrap，并得到了一个新的node_modules目录.万一我再次运行npm install和meteor，以强制启动时执行任何进程. body.html 和 body.js 位于imports/ui中. body.html 是
I did meteor npm install --save bootstrap and got a new node_modules directory. Just in case I run npm install and meteor again, to force any processes carried out on startup. body.html and body.js live in imports/ui. body.html is
<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到imports/ui dir，然后从那里我cat ../../node_modules/bootstrap/dist/css/bootstrap.min.css查看该文件，因此该路径看起来不像是不正确的问题)，并且不会显示任何内容.
But it complains it can not find the module ../../node_modules/bootstrap/dist/css/bootstrap.min.css (if I cd to the imports/ui dir and from there I cat ../../node_modules/bootstrap/dist/css/bootstrap.min.css I see the file, so it doesn't look like problem with that path being incorrect) and won't display anything.
添加import bootstrap from 'bootstrap'似乎无效. client/main.js 也会import '../imports/ui/body.js';
Adding import bootstrap from 'bootstrap' seems to have no effect. client/main.js does also import '../imports/ui/body.js';
我实际上知道这应该很简单，就像loger9在他们的答案中指出的那样，但是由于某些原因，我无法使它正常工作.
I actually know that this should be as easy as loger9 points out in their answer, but for some reason I can not get this to work.
推荐答案
I found the solution in this Sergio Tapia's blog post. It works on Meteor 1.3.2.2 or greater. These are the steps that worked for me (with SASS/SCSS support):
meteor add fourseven:scss
meteor npm install bootstrap-sass --save
导入您的代码
-
client/main.scss(请注意.scss扩展名):Import to your code
client/main.scss(note the .scss extension):@import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";-
client/main.js: client/main.js:import 'bootstrap-sass';
我找到的 Glyphicons 字体的唯一解决方案是将fonts文件夹复制到
public/:The only solution I found for the Glyphicons font was to copy the fonts folder to
public/:cp -avr node_modules/bootstrap-sass/assets/fonts public/请注意如何将其加载到Meteor中(
/fonts/bootstrap，即它必须位于公用文件夹中):Note how it is loaded in Meteor (
/fonts/bootstrap, i.e., it needs to be in the public folder):@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 ，自动前缀安装程序最好作为单独的插件安装:
Optional step: Autoprefixer
Per fourseven:scss, autoprefixer should preferably be installed as a separate plugin:
# optional meteor remove standard-minifier-css meteor add seba:minifiers-autoprefixer这篇关于如何在Meteor 1.3中通过NPM使用引导程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
