4

を使用すると、次のエラーが発生します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

1回目

私が最初に試したのは、既存のものを使用しようとすることでした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']);
};

gruntエラーなしで動作し、ファイルの変更も認識しますが、 sass/testをコンパイルしません。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.

…まったくわかりません。

2 回目の試行 – 優先試行

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、ルート ( /test) に追加して Gruntfileproject_path = "_src"で使用してみました。options: { config: 'config.rb' }これは私の他の試験と同じくらいうまくいきませんでした。

Gruntfile のみのバージョンが機能することを本当に望んでいます。コンパスのベース パスがうまく機能していないようですが、どうすればよいかわかりません。

これを解決するためにStackExchangeですでに読んだものの抜粋

私はすでに読んだ：

PS: RVM と Git も使用しています。でも、ここは関係ないと思います。

アップデート：

小さなステップ…いくつかの進歩（実際にはそうではありません）：

/Gruntfile.js

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

config.rb を追加する理由がわかりません (上記の「2 回目の試行」のようにすべてを書き留める代わりに、すべてが変更され、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。ただし、うなり声を上げて、SASSコードの2行のコメントを外すと、これを吐き出して中止します。

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 はこのプロジェクト フォルダーでのみアクティブです。したがって、その可能性は排除されます。

4

1 に答える 1

5

最終的に (そして 1 日試行錯誤した後)、relativeAssets を false に設定することになりました。

「2回目の試行」での私の間違いは、ブール値を の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 と戦利品全体を使用)。次の仲間に役立つことを願っています。

于 2014-04-27T21:07:46.267 に答える