如何使用Grunt.js和Compass使用Bootstrap来编写Sass？

Question

我想使用官方的Sass端口Bootstrap，结合任务运行器Grunt.js和框架Compass，但根据手册（https://github.com/twbs/bootstrap-sass#bootstrap-for-sass），我没有成功。

成功安装这些Gem：

bootstrap-sass (3.1.0.1, 3.1.0.0)
compass (0.12.2)
sass (3.2.14, 3.2.13, 3.2.12)

我的 Gruntfile.js：

'use strict';

module.exports = function (grunt) {

grunt.initConfig({

  pkg: grunt.file.readJSON('package.json'),

  compass: {
      options: {
        httpPath: './',
        sassDir: '<%= pkg.css.src %>',
        cssDir: '<%= pkg.css.dest %>',
        imagesDir: '<%= pkg.graphics.cssPath %>'
      },
      dev: {
        options: {
          environment: 'development',
          outputStyle: 'expanded',
          force: true
        }
      },
      prod: {
        options: {
          environment: 'production',
          outputStyle: 'compressed',
          force: true
        }
      }
    },

});

grunt.loadNpmTasks('grunt-contrib-compass');

grunt.registerTask('default', ['compass:dev']);
};

在我的custom.scss文件开头，我有：

@import "compass";
@import "boostrap";

当我在命令行中输入 grunt 时，会出现以下错误：

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

没有第二行(@import "boostrap";)一切正常。

我应该怎么做才能在Grunt中开始使用bootstrap-sass gem？需要安装一些新的Grunt插件吗？ 感谢任何答案。

- chr1s

---

如果你只是在运行Compass，我会指出你在config.rb中没有引用它。我对Grunt一无所知，也不知道如何指定依赖关系。 - cimmanon

Answer 1

在使用 bootstrap-contrib-sass 后，我终于解决了长期存在的问题。

在你的 Gruntfile 文件中，通过设置 includePaths 配置变量来指定 compass 和 bootstrap-sass gem 的位置：

options: {
    compass: true,
    includePaths: [
        '/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'
    ],
    ...
}

顺便提一下：你可以通过使用 grunt --verbose 标志来运行 grunt，以便输出有助于调试的额外信息。

- Drew Hammond

---

谢谢！指定路径解决了问题！仅供参考：当使用不带Compass的SASS时，参数称为loadPath-https://github.com/gruntjs/grunt-contrib-sass#loadpath。 - chr1s

@chr1s 很高兴它起作用了！你能够使用 loadPath 使其工作吗？我没有在我的答案中包含它的原因是，无论我放什么，它似乎完全忽略了该参数。includePaths 是唯一最终让它为我工作的东西。 - Drew Hammond

Answer 2

看起来你拼错了bootstrap:

@import "boostrap"; 应该是 @import "bootstrap";

- xphong

Answer 3

你正在使用Grunt享受它提供的所有美，但同时你也在使用Bootstrap的宝石。

Grunt使用npm仓库。

对于一个简单的修复，使用bootstrap-sass。

对于更好的整体工作，将上述软件包合并到grunt-bootstrap中，替换less文件为sass，并重新打包发布。然后就可以获得完整的grunt自动化优势了。

- greg.arnott

Answer 4

你可以直接使用：

require: 'bootstrap-sass'

在你的指南针选项文件中，像这样：

compass: {
  options: {
    sassDir: 'src/sass',
    cssDir: 'dist/css',
    environment: 'production',
    require: 'bootstrap-sass'
  }
}

这样可以避免在您的gruntfile中硬编码路径。

- MikeeMike

Answer 5

在 GruntFile 中的“compass options”中，您还可以添加：

raw: 'require "bootstrap-sass"'

因此，选项应该看起来像这样：

compass: {
    options: {
        sassDir: '<%= yeoman.app %>/sass',
        cssDir: '.tmp/styles',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/fonts',
        importPath: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'require "bootstrap-sass"\nSass::Script::Number.precision = 10\n'
    }
}

- Mike LP