twitter-bootstrap – 如何在Meteor 1.3中通过NPM使用bootstrap

发布时间：2020-12-18 00:18:10 所属栏目：安全来源：网络整理

导读：据我所知,Meteor 1.3优先于流星/大气包装上的npm包装. 我尝试通过meteor npm install bootstrap将Bootstrap添加到我的项目中.然后我添加了几个带有类行和col-md-3的div来测试它是否正常工作,我没有看到我的期望(我没有看到网格布局).我在body标签内创建了这

据我所知,Meteor 1.3优先于流星/大气包装上的npm包装.

我尝试通过meteor npm install bootstrap将Bootstrap添加到我的项目中.然后我添加了几个带有类行和col-md-3的div来测试它是否正常工作,我没有看到我的期望(我没有看到网格布局).我在body标签内创建了这些div,它在名为./imports/ui/body.html的文件中声明.也许我错过了来自’meteor / bootstrap’的import {Bootstrap},从’bootstrap’导入{bootstrap}(我尝试过,但没有成功)或类似或导入’../../node_modules/bootstrap/ somefile”.

我试过meteor add twbs：bootstrap和app按预期工作(适合那些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住在进口/ 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我看到了这个文件,所以它看起来不像那个路径不正确的问题)并且不会显示任何内容.

从’bootstrap’添加导入引导程序似乎没有任何效果. client / main.js也导入’../imports/ui/body.js’;

我实际上知道这应该像loger9在他们的答案中指出的那样容易,但由于某种原因我不能让这个工作.

解决方法

我在 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字体的唯一解决方案是将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") 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!