dist
文件很容易。然而,我在项目中使用LESS,并希望利用Bootstrap的LESS文件。有没有推荐的方法来链接这些文件?
此外,由于使用LESS技术实际上是使用Bootstrap的源文件,所以是否应该将Bootstrap的JS源文件也链接起来?或者认为混合源代码
bootstrap/less
和已编译的分发文件bootstrap/dist/js/bootstrap.js
会正常工作?dist
文件很容易。bootstrap/less
和已编译的分发文件bootstrap/dist/js/bootstrap.js
会正常工作?从Ember CLI版本0.1.1开始,这是在项目中使用Bootstrap的less的推荐方法。
首先,安装Bootstrap:
$ bower install --save-dev bootstrap
然后安装less预处理器
$ npm install --save-dev ember-cli-less
然后在该文件夹中用 app.less 替换 app.css:
/app/styles/
在你的新app.less文件中,将以下内容添加到文件顶部:
@import "../../bower_components/bootstrap/less/bootstrap.less";
在你的Brocfile.js文件中,添加如下内容:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
如果您想使用与Bootstrap捆绑在一起的字形图标,请将以下内容添加到Brocfile.js中(如果您使用最新的ember-cli,则为ember-cli-build.js
):app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.eot', {
destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.svg', {
destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.ttf', {
destDir: 'fonts'
});
app.import(app.bowerDirectory + '/bootstrap/fonts/glyphicons-halflings-regular.woff', {
destDir: 'fonts'
});
Ensure ember-cli compiles your .less
files by installing broccoli-less-single
$ npm install --save-dev ember-cli-less
Install bootstrap3 with bower
$ bower install bootstrap --save
Remove app/styles/app.css
and create your own app/styles/app.less
@import "vendor/bootstrap/less/bootstrap.less";
奖励:
您可以通过Brocfile.js
文件导入bootstrap.js。只需添加:
app.import('vendor/bootstrap/dist/js/bootstrap.js');
app/index.html
中,请确保添加 。<script src="assets/vendor.js"></script>
对于与Ember 2.8相关的解决方案,我从ember-cli-less
插件的自述文件中获得了帮助:
安装Bootstrap源码:
bower install --S bootstrap
在 ember-cli-build.js
文件中指定包含路径:
var app = new EmberApp({
lessOptions: {
paths: [
'bower_components/bootstrap/less'
]
}
});
将其导入到app.less文件中:
@import 'bootstrap';
这是一个关于it技术的例子。使用ember-cli与Less版本的Bootstrap:
安装Bootstrap Bower包
$ bower install --save bootstrap
将bootstrap.less
导入到app/styles/app.less
中
@import "vendor/bootstrap/less/bootstrap.less";
你可能已经找到了解决方案,但使用 ember-cli 0.0.33+,运行 bower install -S bootstrap,它会将文件保存到 vendor 文件夹并写入 bower.json 文件。
然后在 Brocfile.js 中添加 app.import('vendor/bootstrap/dist/js/bootstrap.min.js');
。我在 app/styles/
中包含了一个 app.less 文件。你可以从那里引用 vendor/bootstrap/less/
。
我还在 app.less 的底部包含了一个 custom.less 导入,可以在其中编写自己的内容。
希望能有所帮助。