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

问题描述:

我对grunt很新。我刚刚设置了一个grunt项目,基本上按照这个教程:Setting up Sass with Grunt。我的目录结构稍有不同,但是我已经完成了让我的gruntfile中定义的任务运行 - 至少执行$ grunt --verbose不会给我任何错误,并且任何时候我都会将其中一个定义为我的源的scss文件更改为watch任务触发。但是,没有生成css文件。grunt-contrib-sass没有编译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文件正在生成。我究竟做错了什么?

高度赞赏任何提示,

斯特凡

回答我的问题:我发现失踪in this blogpost细节。在那篇文章中,作者明确提到创建一个style.scss(可以命名为我猜的任何名称),其中她将包含sass文件(* .scss)的引导目录与@import链接起来。

这样做。我想这是关于_前缀。当使用@import时,我的Gruntfile中正在寻址的scss文件不能以下划线开头,对吧? (我没有尝试过不同的变体,因为我想要的只是简单的解决)

+0

我花了大约一个小时才找到这个答案,并立即解决了我的grunt/sass编译器问题。感谢您发布您的答案! – 2016-09-14 11:14:29