, ,

[Grunt & Yeoman] Compass と grunt-contrib-compass を組み合わせて sourcemap をエラーなしで生成する

公開日: 2014/09/08
更新日: 2018/11/08

以前のバージョンではエラーが発生して、うまく動かなかった sourcemap が生成されました。

Contents

状況

いろいろややこしくて見送っていたのですが、動くようになったとのこと。

Sourcemaps · Issue #23 · gruntjs/grunt-contrib-compass

Everything works fine with grunt-contrib-compass 0.9.1 and the gem compass 1.0.1

以前は下記のようなエラーで、.css.map ファイルが生成されませんでした。

ArgumentError on line ["55"] of /Users/****/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-1.0.0.alpha.21/lib/compass/sprite_importer.rb: wrong number of arguments (2 for 0)

インストール

以下の最新バージョンをインストールしました。

% sass --version
Sass 3.4.3 (Selective Steve)
% compass --version
Compass 1.0.1 (Polaris)
Copyright (c) 2008-2014 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
% npm view grunt-contrib-compass version
1.0.0

Gruntfile

こんな形で追記します。

Gruntfile.coffee
    # grunt-contrib-compass
    compass:
      dev:
        options:
          environment: 'development'
          # debugInfo: false
          sourcemap: true

実行

% grunt compass
Loading "grunt-contrib-compass" plugin
Running "compass:dev" (compass) task
unchanged src/img/globalnav-s47f9160579.png
    write src/css/style.css (2.53s)
    write src/css/style.css.map
Done, without errors.

その他の新しいオプションは、ひとまずこのあたりを探りながらでしょうか。

Google Chrome

Google Chrome のバージョンは 37.0.2062.94 ですが、すでに Sourcemap に対応しています。

2014-09-09_sourcemap_01

  1. DevTools Settings を開き、General をクリック
  2. Enable CSS source maps と Auto-reload generated CSS をチェック

とりあえず生成されたところまで。

こちらを見ながら、また確認します。