twitter-bootstrap – 如何使用Grunt.js和Compass将Bootstrap用于Sass?

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 如何使用Grunt.js和Compass将Bootstrap用于Sass?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用一个官方Sass端口的Bootstrap与任务运行器Grunt.js和框架指南针,但根据手册( https://github.com/twbs/bootstrap-sass#bootstrap-for-sass)我没有成功.

成功安装了这些宝石:

  1. bootstrap-sass (3.1.0.1,3.1.0.0)
  2. compass (0.12.2)
  3. sass (3.2.14,3.2.13,3.2.12)

我的Gruntfile.js:

  1. 'use strict';
  2.  
  3. module.exports = function (grunt) {
  4.  
  5. grunt.initConfig({
  6.  
  7. pkg: grunt.file.readJSON('package.json'),compass: {
  8. options: {
  9. httpPath: './',sassDir: '<%= pkg.css.src %>',cssDir: '<%= pkg.css.dest %>',imagesDir: '<%= pkg.graphics.cssPath %>'
  10. },dev: {
  11. options: {
  12. environment: 'development',outputStyle: 'expanded',force: true
  13. }
  14. },prod: {
  15. options: {
  16. environment: 'production',outputStyle: 'compressed',force: true
  17. }
  18. }
  19. },});
  20.  
  21. grunt.loadNpmTasks('grunt-contrib-compass');
  22.  
  23. grunt.registerTask('default',['compass:dev']);
  24. };

在我的custom.scss开头,我有:

  1. @import "compass";
  2. @import "boostrap";

当我输入

grunt

在命令行中我收到以下错误

  1. Syntax error: File to import not found or unreadable: boostrap.
  2. Load paths:
  3. c:/Users/Radek/WWW/svobodanabytek/src/sass
  4. C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  5. C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  6. Compass::SpriteImporter
  7. on line 2 of c:/Users/Radek/WWW/svobodanabytek/src/sass/custom.scss

没有第2行(@import“boostrap”;)一切正常.

我该怎么做才能开始在Grunt中使用bootstrap-sass gem?安装一些新的Grunt插件
谢谢你的回答.

解决方法

在使用 bootstrap-contrib-sass长时间遇到同样的问题后,我能够正常工作.

在您的Gruntfile中,在includePaths配置变量中指定指南针和bootstrap-sass gems的位置:

  1. options: {
  2. compass: true,includePaths: [
  3. '/var/www/.rvm/gems/ruby-2.1.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets','/var/www/.rvm/gems/ruby-2.1.1/gems/compass-0.12.4/frameworks/compass/stylesheets'
  4. ],...
  5. }

附注:您可以使用grunt –verbose标志运行grunt以转储有助于调试的额外信息.

猜你在找的Bootstrap相关文章