安装

Question

据我所知，Meteor 1.3在 Meteor / atmosphere 软件包上支持 npm 软件包。

我尝试通过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'。

我尝试meteor add twbs:bootstrap并且应用按预期工作（适用于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 位于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在他们的答案中指出的那样容易，但由于某种原因，我无法让它发挥作用。

Answer 1

我在Sergio Tapia's blog post中找到了解决方案。它适用于Meteor 1.3.2.2或更高版本。这些步骤对我有用（ SASS / SCSS 支持）：

安装

<md-sidenav #sidenav (open)="mybutton.focus()" align="start">
     ......
  </md-sidenav>

    <button (click)="sidenav.toggle()"></button>

导入代码

meteor add fourseven:scss meteor npm install bootstrap-sass --save （请注意.scss扩展名）：
```
client/main.scss
```
<强> @import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"; ：
```
client/main.js
```

Glyphicons的解决方法

我找到的 Glyphicons 字体的唯一解决方案是将fonts文件夹复制到import 'bootstrap-sass';：

public/

注意它是如何在Meteor中加载的（cp -avr node_modules/bootstrap-sass/assets/fonts public/，即它需要在公共文件夹中）：

/fonts/bootstrap

可选步骤：Autoprefixer

每fourseven:scss，最好将autoprefixer作为单独的插件安装：

@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");
}

Answer 2

首先你需要通过npm安装bootstrap：

meteor npm install --save bootstrap或与bootstrap-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';

像这样导入它应该可以解决这个问题。

如何在Meteor 1.3中通过NPM使用bootstrap？

2 个答案:

安装

导入代码

Glyphicons的解决方法

可选步骤：Autoprefixer