个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 05:29:34 25 4
gpt4 key购买 nike

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

我尝试添加 Bootstrap通过 meteor npm install bootstrap 访问我的项目.然后我添加了几个带有类的 div row和 col-md-3测试它是否正常工作，但我没有看到我所期待的(我没有看到网格布局)。我在 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 与 meteor 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 位于 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 在他们的回答中指出的那样简单，但由于某种原因，我无法让它工作。

最佳答案

我在这个 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 的解决方法

    我为 找到的唯一解决方案字形图标 font 是将字体文件夹复制到 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

    关于twitter-bootstrap - 如何在 Meteor 1.3 中通过 NPM 使用 Bootstrap ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36578669/

    25 4 0
    文章推荐： pandas - 如何在 Pandas 数据框中查找列的 ngram 频率？
    文章推荐： regex - 使用正则表达式提取文本模式
    文章推荐： java - 我将如何解决这个类加载器问题？
    文章推荐： visual-studio - 如何在 Xamarin.Android 的 AXML 上启用智能感知？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com