Fatal编程技术网

Twitter bootstrap 3 带SCSS、grunt和Compass配置问题的引导

twitter-bootstrap-3 sass gruntjs

Twitter bootstrap 3 带SCSS、grunt和Compass配置问题的引导,twitter-bootstrap-3,sass,gruntjs,compass-sass,Twitter Bootstrap 3,Sass,Gruntjs,Compass Sass,我正在尝试使用sass版本的引导设置一个工作流程。我已经把指南针和sass都设置好了，但似乎无法启动。这就是我所拥有的 Gruntile module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-compass');

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

Gruntile

    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>


鲁克斯聚会
你好
Lorem ipsum dolor sit amet，奉献精英。因此，我们需要一种新的治疗方法，即治疗前、治疗后、治疗后和治疗后。Nisi Essentialtibus aut，福加
这是我第一次尝试设置它，我不确定我错过了什么。我猜这可能是我在Grunfile中设置任务的方式。我试图复制我在compass任务中所做的工作。

我发现我遗漏了什么。在package.json文件中，我需要添加引导依赖项。以下是我的代码：

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