带有 SCSS、grunt 和 Compass 配置问题的 Bootstrap答案

【问题标题】：Bootstrap with SCSS, grunt and Compass configuration problems带有 SCSS、grunt 和 Compass 配置问题的 Bootstrap
【发布时间】：2015-04-17 19:04:18
【问题描述】：

我正在尝试使用 sass 版本的引导程序设置工作流程。我已经设置了指南针和 sass，但似乎无法让引导程序工作。这就是我所拥有的。

咕噜文件

    module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-bootstrap');
    grunt.initConfig({
        uglify: {
            my_target:{
                files:{
                    '_/js/script.js' : ['_/components/js/*.js']
                } // files
            } // my_target
        },// uglify
        compass: {
            dev: {
                options:{
                    config: 'config.rb'
                } // options
            } // dev
        }, // compass
        bootstrap: {
            dev: {
                options:{
                    config: 'config.rb'
                } // options
            } // dev
        }, // bootstrap
        watch:{
            options: {
                 livereload: true
            }, // options
            scripts:{
                files: ['_/components/js/*.js'],
                tasks: ['uglify']
            }, // scripts
            sass: {
                files: ['_/components/sass/*.scss'],
                tasks: ['compass:dev']
            }, //sass
            html:{
                files: ['*.html']
            } // html       
        } // watch
    }) // initConfig
    grunt.registerTask('default', 'watch'); // set to be the default task for grunt
} // exports

config.rb 文件：

require 'bootstrap-sass'

css_dir = '_/css'
sass_dir = '_/components/sass'
javascript_dir = '_/js'
output_style = :compressed

这是我的 scss 文件：

@import "compass";
@import "bootstrap";

@import "_variables";
@import "_mixins";
@import "_base";
@import "_layout";
@import "_modules";

我没有收到任何错误，但我没有看到引导框架将我的 DOM 元素移动到行和列中，就像我将它们结构化一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Roux Meetups</title>
    <link rel="stylesheet" href="_/css/styles.css">
</head>
<body>
    <h1>Hello</h1>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet saepe mollitia pariatur accusantium, facilis animi aperiam, culpa placeat nulla quaerat deleniti ipsa consequatur rerum minima modi. Nisi necessitatibus aut, fuga?</p>
            </div>
        </div>
    </div>

    <script scr="_/js/script.js"></script>
    <script scr="http://localhost:35729/livereload.js"></script>
</body>
</html>

这是我第一次尝试设置它，我不确定我错过了什么。我的猜测是这可能是我在 gruntfile 中设置任务的方式。我试图复制我为指南针任务所做的工作。

【问题讨论】：

标签： twitter-bootstrap-3 sass gruntjs compass-sass

【解决方案1】：

我知道我错过了什么。在 package.json 文件中，我需要添加 Bootstrap 依赖项。这是我的代码：

{
"name" : "rouxmeetups",
"version" : "0.0.1",
"dependencies" : {
    "grunt" : "~0.4.1",
    "grunt-contrib-watch" : "~0.5.3",
    "grunt-contrib-compass" : "~0.5.0",
    "grunt-contrib-uglify" : "~0.2.2",
    "matchdep" : "~0.1.2",
    "bootstrap-sass-official": "3.2.0",
}

}

【讨论】：