- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
据我了解,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>
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';
最佳答案
我在这个 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';
public/
:
cp -avr node_modules/bootstrap-sass/assets/fonts public/
/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");
}
# 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/
我是一名优秀的程序员,十分优秀!