Chrome Canary は、デバッグ情報を使用してテーマをコンパイルできる場合、いくつかの優れた SASS インスペクター機能を提供します。一般的な Compass スタイル シートで次の行を使用してこれを行う方法を見つけましたsass_options = { :debug_info=>true }: 彼らの「テスト」コマンドはこのファイルを展開できますが、SASS インスペクターを機能させるには、@media タグ (またはデバッグ情報) が必要です。
Sencha EXT JS テーマのビルド プロセスを変更して、Canary サポート用のデバッグ情報を追加する方法を知っている人はいますか? build.css.preprocessor.opts.productionまたは、関連している可能性があるため、build.properties で何が行われるかを誰かが知っていますか?
Ext-JS にはたくさんの mixin やその他のインポートがあるので、私が望むほど素晴らしいものではありません。ただし、これを機能させる方法は次のとおりです。
システム セットアップ (Chrome 27+ は特定のタイプのソース マッピングのみをサポートするため、ここのバージョンは重要です):
Ext-JS 4.2.1
SASS (3.3.0.alpha.149)
Compass (0.12.2)
それが確立されたら、テーマパッケージに移動して実行しますsencha package build。これにより、多かれ少なかれ、テーマ パッケージに /build フォルダーが作成されます。このビルドは、{theme-name}-all.scss他のすべての mixin を取得する も生成し、個別にコンパイルする必要があるインクルードを生成します。これは非常に重要です!
それが完了したら、次のようなものを実行できます。
sass --compass --sourcemap {theme-name}-all.scss:resources/{theme-name}-all.css
もちろん、環境に合わせてこれらを変更してください。これにより、コンパイルされた css ファイルが /resources ディレクトリ (そこにあるはずです) にビルドされます。すべての画像やその他のリソースがスタイルシートに相対的にリンクされているため、そこでコンパイルすることが重要です。
そこから、この新しく生成された css ファイルを指すように index.html (アプリのルートにある必要があります) を変更しました。この情報を使用するにはChromeもセットアップする必要がありますが、それはこの質問の範囲外です。
これが他の誰かに役立つことを願っています。Sencha に関連するテーマは非常に多岐にわたるため、実際には混合バッグです。うまくいけば、これは時間の経過とともに良くなります。
無料の sencha テーマまたは sencha テーマ ビルダーを探しているなら、ここが最適なサイトです。
http://developerextensions.com/index.php/sencha-theme-builder