node.js – Grunt Compass不会创建CSS文件

使用grunt指南针时出现以下错误：

“您必须从项目目录中编译单个样式表.”

我用3种不同的方式尝试了它.更多下面.

我的文件夹结构：

test \
     Gruntfile.js
     package.json
     \ node_modules \
     \ _src \ (this is the root folder of my jekyll sitE)
        \ config.rb
        \ index.html
        \ static/
            \ _sass \
            \ css \
            \ images \
            \ js \

什么有效：

一切正常,不使用grunt并使用/_src/config.rb：

#project_path = "_src/"
http_path = "/"
css_dir = "css"
css_path = "static/" + css_dir
sass_dir = "_sass"
sass_path = "static/" + sass_dir
images_dir = "images"
images_path = "static/" + images_dir
output_style = :expanded
relative_assets = true
line_comments = false

所以,在/ src中我可以用罗盘手表编译得很好.

什么行不通

无论如何,我决定放弃所有的GUI应用程序并用grunt加强它.这就是问题开始的地方.

我也是最新的：

$grunt --version
>> grunt-cli v0.1.13

$npm -v
>> 1.4.3

$node -v
>> v0.10.26

第一次尝试

我尝试的第一件事是尝试使用现有的config.rb：

@H_751_13@module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),// Config watch: { compass: { files: ['**/*.{scss,sass}'],tasks: ['compass:dev'] },js: { // PLACEHOLDER HERE } },compass: { dev: { // dev options // ↓↓↓ HERE'S THE COMPASS CONfig FILE ↓↓↓ options: { config: '_src/config.rb' } },prod: { // prod options },},jshint: { options: { jshintrc: '.jshintrc' },all: ['Gruntfile.js','_src/static/js/*.js'] },browserSync: { files: { src : [ '_src/static/css/*.css','_src/static/images/*','_src/static/js/*.js','_src/**/*.html' ],options: { watchTask: true } } }); // Load the Grunt plugins. grunt.loadNpmTasks('grunt-contrib-compress'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-browser-sync'); // Register the default tasks. grunt.registerTask('default',['compass:dev','browserSync','watch']); grunt.registerTask('prod',['compass:prod']); };

从/ test运行grunt没有错误,它甚至可以识别文件更改,但不编译我的sass.没有创建css文件.

我尝试了咕噜咕噜的指南针–verbose并且它中止了：

Running "compass:prod" (compass) task
Verifying property compass.prod exists in config...oK
File: [no files]
Options: cssDir=["_src/static/css"],sassDir=["_src/static/_sass"],imagesDir=["_src/static/images"],javascriptsDir=["_src/static/js"],fontsDir=["_src/static/fonts"],outputStyle="compressed",relativeAssets="true",noLineComments="true"
Options: cssDir=["_src/static/css"],noLineComments="true",time
You must compile individual stylesheets from the project directory.
Warning: ↑ Use --force to conTinue.

Aborted due to warnings.

……我完全不知道.

第二次尝试 – 首选尝试

因为我不喜欢在/ _src /中使用COnfig.rb,所以我删除了它并在Gruntfile.js中替换了选项：{Config：’_ src / config.rb’}：

options: {
    //config: '_src/config.rb'
    cssDir: ['_src/static/css'],sassDir: ['_src/static/_sass'],imagesDir: ['_src/static/images'],javascriptsDir: ['_src/static/js'],fontsDir: ['_src/static/fonts'],outputStyle: 'expanded',relativeAssets: 'true',noLineComments: 'false'
}

错误与前者完全相同：

第3次尝试

作为最后的手段,我尝试将config.rb放在root(/ test)中添加project_path =“_ src”并在Gruntfile中使用选项：{Config：’config.rb’}.这确实和我的其他试验一样差.

我真的很喜欢Gruntfile-only版本.我猜罗盘的基本路径不是很好,但无法弄清楚要做什么.

我已经在StackExchange上阅读的内容摘录来解决这个问题

我已经读过：

> build automation – Grunt compass task not compatible with this directory structure? – Stack Overflow

>尝试了relativeAssets：’false’技巧

> sass – “You must compile individual stylesheets from the project directory” error with compass project – Stack Overflow

>这里没有新想法.我的目录对于Sass,CSS,JS等都是不同的.

> build automation – Grunt compass task not compatible with this directory structure? – Stack Overflow

>非常类似于我的问题.但OP希望使用COnfig.rb文件,并希望将其置于其文件夹结构中.

> sass – “You must compile individual stylesheets from the project directory” error with compass project – Stack Overflow

>罗盘唯一的问题,罗盘初始化为解决方案.不过,我的指南针在没有咕噜声的情况下使用.所以我驳回了这个.

PS：我也使用RVM和Git.但我猜这些并不重要.

更新：

小步骤…一些进步(不是真的)：

/Gruntfile.js

compass: {
    dev: {
        // dev options
        options: {
            config: 'config.rb',cssDir: '_src/static/css',sassDir: '_src/static/_sass'
        }
    },

我不明白为什么添加config.rb(而不是像上面的“第二次尝试”一样把它全部写下来改变所有内容并且grunt决定最终输出一个css文件.

/config.rb

http_path = "/"
css_dir = "static/css"
sass_dir = "static/_sass"
images_dir = "static/images"
javascript_dir = "static/js"
fonts_dir = "static/fonts"
relative_assets = false

上海社会科学院：

.logo {
    BACkground-image: image-url($logo);
    //width: image-width($logo);
    //height: image-height($logo);
}

渲染CSS：

// relative_assets = true
// image still shows up,but it's not the sites root
// /test/_src/static/images ==> _src should be the root
BACkground-image: url('../../../static/images/gaya-design-logo.png');

// relative_assets = false
BACkground-image: url('/static/images/gaya-design-logo.png');

我也收到一个错误：

WARNING: 'gaya-design-logo.png' was not found (or cAnnot be read) in /Users/pattulus/Sites/test/static/images

这是“很好”,因为我在使用常规罗盘手表时也会得到这个.然而,随着grunt,当我取消注释SASS代码中的两行时,它会中止吐出：

Errno::ENOENT on line ["28"] of /Users/pattulus/.rvm/gems/ruby-2.0.0-p451@test/gems/compass-0.12.6/lib/compass/sass_extensions/functions/image_size.rb: No such file or directory - /Users/patte/Sites/test/static/images/gaya-design-logo.png

奇怪,因为“普通罗盘”的工作原理.我没有全局安装指南针,gem只在此项目文件夹中处于活动状态.因此排除了这种可能性.