Grunt + Compass不會創建CSS文件

Question

使用grunt compass時出現以下錯誤：

“您必須從項目目錄中編譯單個樣式表。”

我用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我可以用compass watch編譯得很好。

---

什么行不通

無論如何，我決定放棄所有的GUI應用程序並用grunt加強它。 這就是問題開始的地方。

我也是最新的：

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

$ npm -v
>> 1.4.3

$ node -v
>> v0.10.26

第一次嘗試

我嘗試的第一件事是嘗試使用現有的config.rb ：

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文件。

我嘗試了grunt compass watch --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"], sassDir=["_src/static/_sass"], imagesDir=["_src/static/images"], javascriptsDir=["_src/static/js"], fontsDir=["_src/static/fonts"], outputStyle="compressed", relativeAssets="true", noLineComments="true", time
You must compile individual stylesheets from the project directory.
Warning: ↑ Use --force to continue.

Aborted due to warnings.

......我完全不知道。

第二次嘗試 - 首選嘗試

因為我不喜歡具有config.rb圍坐在/_src/無論如何，我刪除了，取而代之options: { config: '_src/config.rb' }在Gruntfile.js有：

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"並在project_path = "_src"使用options: { config: 'config.rb' } 。 這確實和我的其他試驗一樣差。

我真的很喜歡Gruntfile-only版本。 我猜羅盤的基本路徑不是很好，但無法弄清楚要做什么。

---

我已經在StackExchange上閱讀的內容摘錄來解決這個問題

我已經讀過：

• 構建自動化 - Grunt羅盤任務與此目錄結構不兼容？ - 堆棧溢出
  • 嘗試了relativeAssets: 'false'技巧
• sass - “你必須從項目目錄編譯單個樣式表”錯誤與指南針項目 - Stack Overflow
  • 這里沒有新想法。 我的目錄對於Sass，CSS，JS等都是不同的。
• 構建自動化 - Grunt羅盤任務與此目錄結構不兼容？ - 堆棧溢出
  • 與我的問題非常相似。 但OP希望使用config.rb文件，並希望將其置於其文件夾結構中。
• sass - “你必須從項目目錄編譯單個樣式表”錯誤與指南針項目 - Stack Overflow
  • 羅盤唯一的問題， compass init為解決方案。 不過，我的指南針在沒有咕嚕聲的情況下使用。 所以我駁回了這個。

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

這是“很好”，因為我在使用常規compass watch時也會得到這個。 然而，隨着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只在此項目文件夾中處於活動狀態。 因此排除了這種可能性。

Answer 1

最后（在一天的試驗和錯誤之后），它歸結為將relativeAssets設置為false。

我在“第二次嘗試”中的錯誤是將布爾值放入這樣的relativeAssets: 'false',而不是relativeAssets: false, .

那和一些調整basePath和“更多”。

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Config
        watch: {
            compass: {
                files: ['**/*.{scss,sass}'],
                tasks: ['compass:dev']
            },
        },

        compass: {
            dev: {
                // dev options
                options: {
                    httpPath: '/',
                    basePath: '_src',
                    cssDir: 'static/css',
                    sassDir: 'static/_sass',
                    imagesDir: 'static/images',
                    javascriptsDir: 'static/js',
                    fontsDir: 'static/fonts',
                    outputStyle: 'expanded',
                    relativeAssets: false,
                    noLineComments: false
                }
            },
        },
        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']);
};

這肯定是漫長的一天......事實上我一直試圖讓這個運行從周五開始就像這樣（使用browserSync和整個戰利品）。 希望能幫助下一個人。