如何在 Meteor 1.3 中通过 NPM 使用引导程序？

Posted 2023-03-08

技术标签:

【中文标题】如何在 Meteor 1.3 中通过 NPM 使用引导程序？【英文标题】：How use bootstrap via NPM in Meteor 1.3? 【发布时间】：2016-08-03 09:13:40 【问题描述】：

据我了解，Meteor 1.3 支持 npm 包而不是 Meteor / 大气 包。

我尝试通过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 代码没有什么特别之处（在添加流星包 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 到 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 是“我无法通过 import "..." 访问的；另外，我刚刚发现并决定在this tutorial 周围玩一下，只是做meteor npm install bootstrap4-webpack-package --save 并在client/main.js 上添加import 'bootstrap4-webpack-package'; 让它工作。我不知道我的其他项目在哪里走错了路。 【参考方案1】：

首先你必须通过 npm 安装引导程序：

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

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

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

【讨论】：

+1。我知道这应该是要走的路，但我无法让它发挥作用。我编辑了我的问题以提供更多详细信息并显示代码。也许我错过了其他地方... 我在您使用boostrap4-webpack-package 的地方看到了您的评论，但我还不能在那里回答（没有足够的代表）。这实际上非常整洁。该包是用 Webpack 构建的，它将 html 和 css 添加到 js 文件中，因此 Meteor 像任何其他包一样加载它，因此在某种程度上它是作弊的。官方包只是不这样做，你必须手动导入任何 html 或 css。我知道，这很糟糕：/。你应该检查你在哪里导入 CSS，你在 JS 中导入 CSS，是在 client/ 中吗？导入不会加载 CSS 或 HTML，仅加载 JS，如 bootstrap.js，为您提供全局变量 bootstrap。编辑：我看到你正试图在../import/ui/body.js 中使用它，你可以尝试在其中导入client/main.js，因为它总是会加载。谢谢，但运气好。我刚刚创建了一个全新的流星项目，运行 meteor npm install --save bootstrap 命令将正文的 html 切换到我的问题中可以看到的内容，并在同一个地方尝试了 import bootstrap from 'bootstrap' @ /client/main.js 和 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';。我看不到正确的网格布局。第一次导入似乎没有效果。对于第二个，我得到“找不到模块”。我不明白我做错了什么。这应该像 ABC 一样简单。默认情况下，Meteor 不导入 scss 文件。您需要安装一个软件包才能做到这一点。 meteor install fourseven:scss 例如将使 scss 示例从此答案中工作。【参考方案2】：

我在Sergio Tapia's blog post 中找到了解决方案。它适用于 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，即它需要在公共文件夹中）：

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

可选步骤：自动前缀

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

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

【讨论】：

谢谢。我得花点时间检查一下。很久以前我决定使用流星包，而不是 npm，但这是有用的信息，以供将来参考。当我有时间检查它时，我会投票。再次感谢。以上链接失效，更新博文在此：sergiotapia.me/meteor/bootstrap/npm/2016/06/13/… 在导入 _bootstrap.scss 之前设置 $icon-font-path 似乎可以完成这项工作... $icon-font-path: '/node_modules/bootstrap-sass/assets/fonts/bootstrap/ ' !default;

以上是关于如何在 Meteor 1.3 中通过 NPM 使用引导程序？的主要内容，如果未能解决你的问题，请参考以下文章

在 Meteor 1.3 + angular1 上使用 npm（凹凸！）

Meteor 1.3 导入 npm 模块问题

`npm install` 与 Meteor 1.3 中的 `meteor npm install` 相同吗？

我在哪里可以在 Meteor 1.3 中安装带有 npm 的包，以便其他 npm 库可以需要它

Meteor 1.3 NPM：意外的保留字导入

在 Meteor 包中使用 npm