grunt-contrib-sass 不编译 css 文件

Question

我对咕噜声很陌生。我刚刚建立了一个 grunt 项目，基本遵循本教程：Setting up Sass with Grunt。我的目录结构有点不同，但到目前为止，我已经完成了运行我的 gruntfile 中定义的任务 - 至少执行 $ grunt --verbose 不会给我任何错误，并且任何时候我更改定义为我的源代码的 scss 文件之一任务被触发。但是，没有生成任何 css 文件。

我的package.json 看起来像这样：

{
    "name": "grunt-test",
    "version": "1.0.0",
    "description": "bootstrap sass and javascript compilation",
    "main": "index.js",

    "repository": {
         "type": "git",
         "url": ""
    },
    "keywords": [],
    "author": "Me",
    "license": "",
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-sass": "^0.8.1",
        "grunt-contrib-uglify": "^0.6.0",
        "grunt-contrib-watch": "^0.6.1",
        "matchdep": "^0.3.0"
    }
}

我的 GruntFile.js：

'use strict';

module.exports = function(grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),
        project: {
            app: '../app',
            assets: '<%= project.app %>/assets',
            src: 'bower_components/bootstrap-sass-official/assets',
            scss: [
                '<%= project.src %>/stylesheets/_bootstrap.scss'
            ],
            js: [
                '<%= project.src %>/javascripts/bootstrap.js',
                '<%= project.src %>/javascripts/bootstrap/*.js'
            ]
        },
        tag: {
            banner: '/*!\n' +
            ' * <%= pkg.name %>\n' +
            ' * <%= pkg.title %>\n' +
            ' * <%= pkg.url %>\n' +
            ' * @author <%= pkg.author %>\n' +
            ' * @version <%= pkg.version %>\n' +
            ' * Copyright <%= pkg.copyright %>. <%= pkg.license %> licensed.\n' +
            ' */\n'
        },
        sass: {
            dev: {
                options: {
                    sourcemap: 'auto',
                    style: 'expanded',
                    banner: '<%= tag.banner %>',
                    compass: false
                },
                files: {
                    '<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
                }
            },
            dist: {
                options: {
                    sourcemap: 'auto',
                    style: 'compressed',
                    compass: false
                },
                files: {
                    '<%= project.assets %>/stylesheets/bootstrap.css': '<%= project.scss %>'
                }
            }
        },
        watch: {
            sass: {
                files: '<%= project.src %>/stylesheets/{,*/}*.{scss,sass}',
                tasks: ['sass:dev']
            }
        }

    });

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.registerTask('default', [ 'sass:dev', 'watch' ]);

}

正如我所看到的，由于我设置项目的方式，我的目录结构与教程中使用的目录结构略有不同。编译目标在我的项目目录 (../app/assets) 外部，而源代码在 bower_components 内。来源似乎得到了正确识别。但是我的目标定义有什么问题？我假设编译器会拾取project.scss 中定义的内容并将其编译为<%= project.assets %>/stylesheets/bootstrap.css。

即使grunt --verbose 告诉我任务已经执行且没有错误，也没有生成 css 文件。我做错了什么？

高度赞赏的任何提示，

斯蒂芬

Answer 1

回答我的问题：我找到了缺少的细节in this blogpost。在那篇文章中，作者明确提到了style.scss（我猜怎么命名）的创建，其中她将包含 sass 文件 (*.scss) 的引导目录与@import 链接起来。

成功了。我想这是关于 _ 前缀的。当使用@import 时，在我的 Gruntfile 中处理的 scss 文件不能以下划线开头，对吗？ （我没有尝试不同的变体，因为我想要的只是简单地解决了）