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

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 如何在Meteor 1.3中通过NPM使用bootstrap?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
据我所知,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

猜你在找的Bootstrap相关文章