我尝试通过
meteor npm install bootstrap
向项目中添加 Bootstrap。然后我添加了一些具有类名为 row
和 col-md-3
的 div 进行测试,但我没有看到期望的结果(我没有看到网格布局)。我将这些 div 创建在了 body
标签内,该标签声明在名为 ./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
适当的网格布局)。
这个线程 建议使用 NPM。也许我错过了一些重要的东西,以便通过 NPM 在 meteor 1.3 上运行它?我的 HTML 代码没有什么特别之处(当添加 meteor 包 twbs:bootstrap 时也可以工作)。唯一的怪癖是 HTML 代码在
imports/
目录中的文件中,因此可能我错过了关于 加载过程 的重要信息。在看到 @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
(如果我切换到 imports/ui 目录,然后从那里运行 cat ../../node_modules/bootstrap/dist/css/bootstrap.min.css 命令,我可以看到文件,所以这似乎不是路径错误的问题),并且不显示任何内容。添加
import bootstrap from 'bootstrap'
看起来没有效果。 client/main.js 也有 import '../imports/ui/body.js';
实际上,我知道这应该像 loger9 在他们的答案中指出的那样简单,但出于某种原因,我无法使其工作。
meteor npm install bootstrap4-webpack-package --save
命令,然后在 client/main.js 文件中添加import 'bootstrap4-webpack-package';
就可以让它正常工作。我不知道我在其他项目中哪里出了问题。 - Diego