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

据我所知，Meteor 1.3支持npm软件包而不是Meteor/atmosphere软件包

我试图通过meteor npm安装引导程序添加到我的项目中。然后，我添加了几个div，其中包含类

row

和

col-md-3

，以测试它是否正常工作，但我没有看到预期的结果（我没有看到网格布局）。我在

body

标记中创建了这些div，该标记在名为

/imports/ui/body.html

的文件中声明。也许我错过了一个来自meteor/Bootstrap的

导入{Bootstrap}

，

来自Bootstrap的导入{Bootstrap}

（我尝试过，但没有成功）或类似的导入，

导入“../../node\u modules/Bootstrap/somefile”

我尝试了

meteor add twbs:bootstrap

，该应用程序按预期工作（对于那些

col-md-3

的应用程序，正确的网格布局）

建议使用NPM。也许我错过了一些重要的东西，以便通过流星1.3的NPM工作

我的HTML代码没有什么特别之处（在添加meteor包twbs:bootstrap时起作用）。唯一的怪癖是HTML代码位于

imports/

目录中的一个文件中，因此我可能错过了有关HTML的一些重要信息

查看@loger9和@benjaminos答案后进行编辑

我安装了meteor npm，保存了引导程序，并得到了一个新的node\u modules目录。以防我再次运行

npm install

和

meteor

，强制启动时执行任何进程。body.html和body.js位于

导入/ui

中。body.html是

但是它抱怨说它找不到模块

。/../node\u modules/bootstrap/dist/css/bootstrap.min.css

（如果我cd到imports/ui目录，从那里我cat.././node\u modules/bootstrap/dist/css/bootstrap.min.css，我看到了这个文件，所以它看起来没有路径不正确的问题），并且不会显示任何内容

从“引导”添加

导入引导似乎没有效果。client/main.js也执行
import'../imports/ui/body.js'

事实上，我知道这应该像loger9在他们的回答中指出的那样简单，但由于某些原因，我无法让它工作。
首先，您必须通过npm安装引导：

meteor npm安装——如果您想要sass版本（我个人的选择），请保存引导
或与
bootstrap sass
相同的东西

如果您安装了标准版本

您必须从包中导入CSS文件，例如，
imports/startup/client/index.js
文件，以确保在客户端启动时加载该文件

如果安装了“引导式sass”

您只需创建一个“main.scss”文件并指向包中的
boostrap.scss
（它应该位于´/node_modules/bootstrap sass/assets/stylesheets/bootstrap.scss´）

所以看起来是这样的

client/main.scss

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

这增加了好处。您可以在该文件中的任何位置不断堆积SCS，并控制css加载顺序。例如，您可以在imports中创建sass目录，创建index.sass文件，然后将其添加到main.scss中。在我看来，它很整洁

那么如何加载JS？

从“引导程序”导入引导程序
或
从“bootstrap sass”导入引导程序

这就是导入npm包的方式

编辑：显然这并不适用于所有人，但在Meteor 1.3.2.2中，他们似乎已经解决了这个问题。现在，您可以（真的）从npm包导入SAS和更少的文件

@import'{}/node_modules/bootstrap sass/assets/stylesheets/_bootstrap.scss'

像这样导入就可以了。
我在这里找到了解决方案。它适用于Meteor 1.3.2.2或更高版本。以下是对我有效的步骤（使用SASS/SCSS支持）：

安装
导入到您的代码中

client/main.scss（注意.scss扩展名）：

@import“{}/node_modules/bootstrap sass/assets/stylesheets/_bootstrap.scss”；

客户端/main.js：

import 'bootstrap-sass';



字形图标的解决方法
我为字形图标找到的唯一解决方案是将字体文件夹复制到
public/
：

cp -avr node_modules/bootstrap-sass/assets/fonts public/

注意它是如何加载到Meteor中的（
/font/bootstrap
，即它需要位于公用文件夹中）：

@font-face{
字体系列：“字形图标半身人”；
src:url（“/font/bootstrap/glyphons-halflings-regular.eot”）；
src:url（“/font/bootstrap/glyphions-halflings-regular.eot？”）格式（“嵌入式opentype”）、url（“/font/bootstrap/glyphions-halflings-regular.woff2”）格式（“woff2”）、url（“/font/bootstrap/glyphions-halflings-regular.woff”）格式（“woff”）、url（“/font/bootstrap/glyphions-halflings-regular.ttf”）格式（“truetype”）、url(“/fonts/bootstrap/glyphicons REQUALE.svg”）格式（“svg”）；
}


可选步骤：自动刷新器
根据，autoprefixer最好作为单独的插件安装：

# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer

+1.我知道应该这样做，但我无法让它起作用。我编辑了我的问题以提供更多细节并显示代码。可能我在其他地方遗漏了一些内容……我在您使用
boostrap4 webpack package
的地方看到了您的评论，但我还无法回答（没有足够的代表）。这实际上相当整洁。该软件包是用Webpack构建的，它将html和css添加到js文件中，因此Meteor会像其他软件包一样加载它，因此在某种程度上是在欺骗。官方软件包只是不这样做，你必须手动导入任何html或css。我知道，它很糟糕：/。你应该检查一下你在哪里导入css，你是imp在JS中对CSS进行排序，是在
client/
中吗？导入不会加载CSS或HTML，只加载JS，如
bootstrap.JS
，为您提供全局变量
bootstrap
。编辑：我看到您正在尝试
import 'bootstrap-sass';

cp -avr node_modules/bootstrap-sass/assets/fonts public/

# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer