2014-11-05 2 views
2

Я довольно новый, чтобы хрюкать. Я только что создал проект grunt, основанный на следующем учебнике: Setting up Sass with Grunt. Моя структура каталогов немного отличается, но до сих пор я выполнил задачу, определенную в моем файле gruntfile - по крайней мере, выполнение $ grunt --verbose не дает мне никаких ошибок, и в любое время я могу изменить один из файлов scss, определенных как мои источники, срабатывает. Однако не создается файл 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 scss-файл, который адресован в моем файле Gruntfile, не должен начинаться с подчеркивания, не так ли? (Я не пробовал разные варианты, поскольку то, что я хотел, было просто решено)

+0

Мне потребовался час, чтобы найти этот ответ и сразу же решить мои проблемы с компилятором grunt/sass. Благодарим за отправку ответа! –

Смежные вопросы