2

IonicおよびAppgyver Steroidsを使用してプロトタイプ プロジェクトを構築しようとしています。Ionic には、AngularJS の上に構築された非常に優れた UI とテンプレートのセットがあります。また、Steroids は、モバイル アプリをテストするための優れたツールをいくつか提供しています (ローカル テスト用の組み込み Web サーバー、自動デプロイ、weinre デバッグ、エミュレーター統合、実際のデバイスにデプロイして weinre でデバッグするための簡単なワークフロー)。そのため、それらを組み合わせることは、これまでで最も素晴らしいアイデアのように聞こえました。

私は勇敢な試み (詳細は後述) を行いましたが、これは有望に見えます。しかし、Steroids ビルド ツールを実行すると、Ionic の SASS をコンパイルしようとすると、多数のエラーが発生します。

詳細....

ジェネレーター コマンドを使用して、Steroids で新しいプロジェクトを開始しました。

steroids create myApp

次に、Ionic を www/components に次のようにインストールしました。

bower install driftyco/ionic-bower

次に、Ionic スターター プロジェクトの 1 つをダウンロードし、Steroids サンプル コードと手動でマージしました。Ionic コードを使用しましたが、CSS および JS インクルードを www/components にリダイレクトしました。次に、Steroids のサンプル コードからインクルードをコピーしました: steroids.js, onerror.js, . さまざまな config.xml ファイルもコピーしました。console.log.jscordova.js

サンプルコードをどこかにアップロードできますが、それが実際に壊れているとは思いません。背景を提供するのは良い考えだと思いました。フランケンシュタインの怪物をテストするために、次のように実行しました。

steroids connect --serve

これにより、ポート 4000 で小さな Web サーバーが起動し、ブラウザーでそのリンクが開きます。ただし、steroids サーバーの起動時に、SCSS ファイルが検出され、それらをコンパイルしようとします。bower パッケージにはビルド済みのパッケージが含まれているため、実際にコンパイルする必要はありませんが、基本が機能するようになったら、おそらく SASS を使用してアプリのスタイルを設定したいと思うでしょう。

ただし、次のエラーが発生します。

Running "steroids-compile-sass" task
SASS files found, attempting to compile them to dist/...

Running "sass:dist" (sass) task
Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_button-bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_button-bar.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$checkbox-height".
        on line 10 of www/components/ionic/scss/_checkbox.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$z-index-action-sheet".
        on line 27 of www/components/ionic/scss/_action-sheet.scss
  Use --trace for backtrace.

Syntax error: Undefined variable: "$line-height-base".
        on line 8 of www/components/ionic/scss/_form.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'button-style'.
        on line 9 of www/components/ionic/scss/_button.scss, in `button-style'
        from line 9 of www/components/ionic/scss/_button.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'translate3d'.
        on line 19 of www/components/ionic/scss/_animations.scss, in `translate3d'
        from line 19 of www/components/ionic/scss/_animations.scss
  Use --trace for backtrace.

File "dist/components/ionic/scss/_button-bar.css" created.
Warning:  Use --force to continue.

Aborted due to warnings.
Syntax error: Undefined mixin 'badge-style'.
        on line 8 of www/components/ionic/scss/_badge.scss, in `badge-style'
        from line 8 of www/components/ionic/scss/_badge.scss
  Use --trace for backtrace.

Syntax error: Undefined mixin 'display-flex'.
        on line 8 of www/components/ionic/scss/_bar.scss, in `display-flex'
        from line 8 of www/components/ionic/scss/_bar.scss
  Use --trace for backtrace.

したがって、これらの未定義の mixin と変数はすべて、私のコード ベースの と の下www/components/ionic/_mixins.scssにwww/components/ionic/_variables.scssそれぞれ存在します。これらは両方とも に含まれていwww/components/ionic/ionic.scssます。Ionic は、あなたが ionic.scss をコンパイルし、すべてを正しい順序 (合理的) に含めることを期待しているようですが、Steroids (を使用しているようgrunt-contrib-sassです) は、ディレクトリ内のすべての SCSS ファイルを別の順序でコンパイルしようとしています。 .

では、Steroids を構成する方法、またはgrunt-contrib-sass単にコンパイルする方法はありますionic.scssか? もしそうなら、どのように？それに失敗した場合、Steroids で SASS コンパイルを無効にするにはどうすればよいですか?

4

3 に答える 3

3

Ionic はすべての scss を ionic.scss にインポートするため、次の_*.scssハックですべてをコンパイルから除外しました\node_modules\grunt-steroids\tasks\steroids-compile-sass.coffee 。

 ...files: [
            {
              expand: true
              cwd: 'app/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
            {
              expand: true
              cwd: 'www/'
              src: ['**/!(_*).scss', '**/!(_*).sass']
              dest: 'dist/'
              ext: '.css'
            }
          ]...
于 2014-04-27T12:38:41.713 に答える
0

メッセージcommand connect requires to be in a Steroids project directoryを見て疑問に思ったのは、何がディレクトリをステロイド プロジェクトにするのかということです。それは私を別の道に導いた

  • ステロイド プロジェクトから構成ディレクトリをコピーします。
  • それをあなたのイオンプロジェクトディレクトリに貼り付けます（次ですが、wwwディレクトリ内ではありません）
  • ステロイド プロジェクトから www/loading.html ファイルをコピーします。
  • これを www/ ディレクトリ (index.html の隣) に貼り付けます。
  • 走るsteroids connect

これにより、Gruntfile.js および package.json ファイルの更新を含むプロジェクトのエラーをチェックするステロイド プロジェクト移行スクリプトが開始されます (手動での介入が必要になる場合があります)。

こんなに簡単だとは思いませんでしたし、移行スクリプトがあるとは思いませんでした - AppGyver チームに感謝します!

于 2014-10-24T08:10:58.967 に答える