首页
其他开发
如何在 Meteor 1.3 中通过 NPM 使用引导程序?

如何在 Meteor 1.3 中通过 NPM 使用引导程序? [英] How use bootstrap via NPM in Meteor 1.3?

查看：12 发布时间：2021/12/22 22:52:23 twitter-bootstrap meteor npm

本文介绍了如何在 Meteor 1.3 中通过 NPM 使用引导程序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

据我所知，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 的网格布局正确).

本帖推荐使用 NPM.也许我错过了一些重要的东西，以便通过 NPM 与 Meteor 1.3 一起工作?

我的 HTML 代码没有什么特别之处(并且在添加流星包 twbs:bootstrap 时起作用).唯一的怪癖是 HTML 代码位于 imports/ 目录中的文件中，所以我可能错过了关于加载过程.

在看到@loger9 和@benjaminos 的回答后进行编辑.

我做了 meteor npm install --save bootstrap 并得到了一个新的 node_modules 目录.以防万一我再次运行 npm install 和 meteor 以强制在启动时执行任何进程.body.html 和 body.js 位于 imports/ui 中.body.html 是

<div class="container page-wrap"><div class="page-header"><h1>标题</h1>

<div class="row"><div class="col-md-3" style="background: red;">逻辑推理

<div class="col-md-3" style="background: lavenderblush;">逻辑推理

和 body.js 包括

import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';导入'./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 在他们的回答中指出的一样简单，但由于某种原因我无法让它发挥作用.

解决方案

我在这个Sergio Tapia 的博文.它适用于 Meteor 1.3.2.2 或更高版本.这些是对我有用的步骤(有 SASS/SCSS 支持):

安装

meteor addfourseven:scss流星 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 字体找到的唯一解决方案是将 fonts 文件夹复制到 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") 格式("woff"), url("/fonts/bootstrap/glyphicons-halflings-regular.ttf") 格式("truetype"), url("/fonts/bootstrap/glyphicons-halflings-regular.svg") 格式("svg");}

<小时>

可选步骤:自动前缀

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

# 可选流星删除标准缩小器CSS流星添加 seba:minifiers-autoprefixer

It is my understanding that Meteor 1.3 favors npm packages over Meteor / atmosphere packages.

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'.

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?

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.

Edits after seeing @loger9 and @benjaminos answers.

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>

and body.js includes

import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';

import './body.html';

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.

Adding import bootstrap from 'bootstrap' seems to have no effect. client/main.js does also import '../imports/ui/body.js';

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):

Installing

meteor add fourseven:scss
meteor npm install bootstrap-sass --save

Import to your code

client/main.scss (note the .scss extension):

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

client/main.js:
```
import 'bootstrap-sass';
```

Workaround for Glyphicons

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/

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

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屋！

查看全文

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆