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 rowcol-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 installmeteor再次,强制在启动时执行任何进程。 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
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com