2014-11-05 131 views
2

我對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文件正在生成。我究竟做錯了什麼?

高度讚賞任何提示,

斯特凡

回答

4

回答我的問題:我發現失蹤in this blogpost細節。在那篇文章中,作者明確提到創建一個style.scss(可以命名爲我猜的任何名稱),其中她將包含sass文件(* .scss)的引導目錄與@import鏈接起來。

這樣做。我想這是關於_前綴。當使用@import時,我的Gruntfile中正在尋址的scss文件不能以下劃線開頭,對吧? (我沒有嘗試過不同的變體,因爲我想要的只是簡單的解決)

+0

我花了大約一個小時才找到這個答案,並立即解決了我的grunt/sass編譯器問題。感謝您發佈您的答案! – 2016-09-14 11:14:29