twitter-bootstrap 如何使用 Grunt.js 和 Compass 为 Sass 使用 Bootstrap？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21562608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Bootstrap for Sass using Grunt.js and Compass?
提问by chr1s
I would like to use an offical Sass port of Bootstrap together with task runner Grunt.js and framework Compass but according to manual (https://github.com/twbs/bootstrap-sass#bootstrap-for-sass) I didn't succeed.
我想将 Bootstrap 的官方 Sass 端口与任务运行程序 Grunt.js 和框架 Compass 一起使用，但根据手册（https://github.com/twbs/bootstrap-sass#bootstrap-for-sass）我没有成功。
Successfully installed these gems:
成功安装了这些 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)
My Gruntfile.js:
我的 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']);
};
At the beginning of my custom.scss I have:
在我的 custom.scss 的开头，我有：
@import "compass";
@import "boostrap";
When I type
当我打字
grunt
咕噜声
in command line I get following error:
在命令行中，我收到以下错误：
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
Without line 2 (@import "boostrap";) everything works fine.
如果没有第 2 行（@import "boostrap";），一切正常。
What should I do to start using bootstrap-sass gem in Grunt? Install some new Grunt plugin? Thanks for any answer.
我应该怎么做才能开始在 Grunt 中使用 bootstrap-sass gem？安装一些新的 Grunt 插件？感谢您的任何回答。
采纳答案by Drew Hammond
I was able to get this working after having the same problem for so long using bootstrap-contrib-sass.
在使用bootstrap-contrib-sass遇到同样的问题这么长时间后，我能够让它工作。
In your Gruntfile, specify the location of your compass and bootstrap-sass gems in the includePathsconfig variable:
在您的 Gruntfile 中，在includePathsconfig 变量中指定指南针和 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'
],
...
}
Side note: you can run grunt with the grunt --verboseflag to dump extra information helpful for debugging.
旁注：您可以使用grunt --verbose标志运行 grunt以转储有助于调试的额外信息。
回答by xphong
Looks like you spelled bootstrap wrong:
看起来您拼写了 bootstrap 错误：
@import "boostrap";should be @import "bootstrap";
@import "boostrap";应该 @import "bootstrap";
回答by greg.arnott
You're using grunt for all the beauty it offers, yet you're using the gem of bootstrap.
您使用 grunt 来获得它提供的所有美感，但您使用的是 bootstrap 的精华。
Grunt uses the npm repo.
Grunt 使用 npm 存储库。
For a simple fix, use bootstrap-sass
对于简单的修复，请使用bootstrap-sass
For a better overall working, merge that above package in with grunt-bootstrapreplacing the less files for sass, as well as any other references, then repackage that as your own release. This will then offer the full grunt automation goodies.
为了更好的整体工作，将上面的包与grunt-bootstrap合并，替换 sass 的 less 文件以及任何其他引用，然后将其重新打包为您自己的版本。这将提供完整的 grunt 自动化好东西。
回答by Mike LP
In the GruntFile "compass options" you can also add:
在 GruntFile 的“指南针选项”中，您还可以添加：
raw: 'require "bootstrap-sass"'
So the options should look something like this:
所以选项应该是这样的：
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'
}
}
回答by MikeeMike
You can just use:
你可以只使用：
require: 'bootstrap-sass'
in your compass options file, like so:
在您的指南针选项文件中，如下所示：
compass: {
options: {
sassDir: 'src/sass',
cssDir: 'dist/css',
environment: 'production',
require: 'bootstrap-sass'
}
}
This avoids having to hardcode paths in your gruntfile.
这避免了必须在 gruntfile 中硬编码路径。
