logo标签列表

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

twitter-bootstrapmeteornpm
10
据我了解，Meteor 1.3 更喜欢使用 npm 包而不是 Meteor / atmosphere 包。
我尝试通过 meteor npm install bootstrap 向项目中添加 Bootstrap。然后我添加了一些具有类名为 row 和 col-md-3 的 div 进行测试，但我没有看到期望的结果（我没有看到网格布局）。我将这些 div 创建在了 body 标签内，该标签声明在名为 ./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 在 meteor 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（如果我切换到 imports/ui 目录，然后从那里运行 cat ../../node_modules/bootstrap/dist/css/bootstrap.min.css 命令，我可以看到文件，所以这似乎不是路径错误的问题），并且不显示任何内容。
添加 import bootstrap from 'bootstrap' 看起来没有效果。 client/main.js 也有 import '../imports/ui/body.js'; 实际上，我知道这应该像 loger9 在他们的答案中指出的那样简单，但出于某种原因，我无法使其工作。
实际上，如果我在 /import 目录中有 CSS，我导入没有任何问题。似乎通过 "..." 导入对我来说无法访问 /node_modules。 - Diego
另外，我刚刚发现并决定尝试一下这个教程，并且只需要执行 meteor npm install bootstrap4-webpack-package --save 命令，然后在 client/main.js 文件中添加 import 'bootstrap4-webpack-package'; 就可以让它正常工作。我不知道我在其他项目中哪里出了问题。 - Diego
2个回答
10

我在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 的方法

    Glyphicons 字体唯一的解决方案是将字体文件夹复制到 public/：

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

    请注意在 Meteor 中的加载方式 (/fonts/bootstrap)，即它需要放在 public 文件夹中：

    @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
    谢谢。我得抽出时间来检查一下这个。很久以前我决定使用Meteor包而不是npm，但这是有用的信息，以备将来参考。等我有时间检查后，我会点赞的。再次感谢。 - Diego
    上面的链接已经失效，这里是更新后的博客文章链接： http://sergiotapia.me/meteor/bootstrap/npm/2016/06/13/how-to-use-twitter-bootstrap-from-npm-in-your-meteor-application.html - romaroma
    1
    在导入_bootstrap.scss之前设置$icon-font-path似乎可以完成这项工作...$icon-font-path: '/node_modules/bootstrap-sass/assets/fonts/bootstrap/' !default; - Julien Malige
    9

    首先，您需要通过npm安装bootstrap：

    meteor npm install --save bootstrap 或者如果您想要sass版本（我个人的选择），则使用bootstrap-sass。

    如果您安装了标准版本

    您需要在例如imports/startup/client/index.js文件中导入包中的CSS文件，以确保它会在客户端启动时加载。

    如果您安装了´bootstrap-sass´

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

    因此，它看起来像这样。

    client/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和less文件。

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

    像这样导入应该就行了。

    1
    +1. 我知道这应该是正确的方法，但我无法使其工作。我编辑了我的问题以提供更多细节并显示代码。也许我在其他地方错过了什么... - Diego
    我看到了你的评论，其中使用了 boostrap4-webpack-package，但我还不能在那里回答（声望不够）。那实际上相当不错。该软件包是使用Webpack构建的，它将html和css添加到js文件中，以便Meteor像任何其他软件包一样加载它，因此在某种程度上这是作弊。官方软件包就是不这样做，您必须手动导入任何html或css。我知道，这很糟糕 :/。 - loger9
    你应该检查一下你导入 CSS 的位置，你是在一个 JS 文件中导入 CSS，它在 client/ 目录下吗？这个导入不会加载 CSS 或 HTML，只会加载 JS，比如 bootstrap.js，并给你提供全局变量 bootstrap。编辑：我看到你正在尝试在 ../import/ui/body.js 中使用它，你可以尝试在其中导入 client/main.js，因为它总是会被加载的。 - loger9
    1
    谢谢，但是没有运气。我刚刚创建了一个全新的Meteor项目，运行了meteor npm install --save bootstrap命令，将body的html切换到我的问题中所见的内容，并尝试在/client/main.js中使用import bootstrap from 'bootstrap'和import '../node_modules/bootstrap/dist/css/bootstrap.min.css';。我无法看到正确的网格布局。第一个导入似乎没有效果。对于第二个导入，我得到了“找不到模块”的错误。我不明白我做错了什么。这应该像ABC一样简单。 - Diego
    默认情况下，Meteor不会导入scss文件。您需要安装一个包才能实现这一点。例如，meteor install fourseven:scss将使得此答案中的scss示例正常工作。 - Hockey
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接