Question

我对咕噜很新。我只是建立了一个咕噜咕噜的项目，基本上遵循了这个教程：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文件。我做错了什么？

任何提示都非常赞赏，

的Stefan

Answer 1

回答我的问题：我找到了遗漏的详细信息in this blogpost。在那篇文章中，作者明确提到创建了一个style.scss（可以命名为我猜），在其中将包含sass文件（* .scss）的引导程序目录与@import链接起来。

这就是诀窍。我想它是关于_前缀的。使用@import时，我的Gruntfile中要处理的scss文件不能以下划线开头，对吧？（我没有尝试过不同的变体，因为我想要的只是解决了）

grunt-contrib-sass没有编译css文件

1 个答案: