Question

我正在尝试使用sass版本的bootstrap设置工作流程。我有罗盘和萨斯所有设置，但似乎无法得到引导工作。这就是我所拥有的。

gruntfile

    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中设置任务的方式。我试图复制我为罗盘任务所做的事情。

Answer 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",
}

}

带有SCSS，grunt和Compass配置问题的Bootstrap

1 个答案: