Grunt / Steroidsでイオン性の温度を構築する

StackOverflow https://stackoverflow.com//questions/23038467

質問

ionic と Appgyverのステロイド。 Ionicは、AngularyJSの上に構築された、非常に良いUISとテンプレートのものを持っています。そしてステロイドは、モバイルアプリケーションをテストするための素晴らしいツール（ローカルテスト、自動展開、Weinreデバッグ、エミュレータ統合、Real Devices、Weinreでデバッグするための簡単なワークフロー）をテストするためのいくつかの素晴らしいツールを提供しています。だからそれらを一緒に置くことは、これまでで最も素晴らしいアイデアのように聞こえました。

私は有望に見える勇敢な試み（以下に詳述されています）を作りました。ただし、ステロイドのビルドツールを実行すると、イオナのSASSをコンパイルし、照会の束が遭遇しようとします。

詳細....

発電機コマンドを使用して、ステロイドを持つ新鮮なプロジェクトを開始しました。

steroids create myApp
.

それでは、www /コンポーネントにInainicをインストールします。

bower install driftyco/ionic-bower
.

それでは、 Ionic Starter Projects をダウンロードしました。ステロイドコードのサンプルコードイオンコードを使用しましたが、CSSとJSはWWW /コンポーネントにリダイレクトしました。次に、サンプルのステロイドコードからのインクルードをコピーします.steroids.js、onerror.js、console.log.js、cordova.js。 assorted config.xmlファイルを渡してコピーしました。

私はいくつかのサンプルコードをどこかにアップロードすることができますが、実際には壊れているものはそうは思わない。私はそれがいくつかの背景を提供することをお勧めします。私のフランケンシュタインのモンスターをテストするために、私は走った：

steroids connect --serve
.

ポート4000上のリトルWebサーバーを起動し、ブラウザ内のリンクを開きます。ただし、Steroids Serverが起動しているときは、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.
.

そのため、それらの未定義のミックスと変数はすべて、www/components/ionic/_mixins.scssおよびwww/components/ionic/_variables.scssの下で、それぞれコードベースに存在します。これらの両方がwww/components/ionic/ionic.scssによって含まれています。 IonicがIonic.scssをコンパイルすることを期待しているようです。注文。

だから、grunt-contrib-sassをコンパイルするだけでステロイドまたはgrunt-contrib-sassを設定する方法はありますか？もしそうなら、どうですか？それに失敗した、ステロイドのSASSコンパイルを無効にするにはどうすればよいですか？

役に立ちましたか？

解決

イオンはionic.scssですべてのSCSをインポートするので、_*.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'
            }
          ]...
.

他のヒント

Appgyverからのメリツリ。

あなたがイオナイズをインストールした方法は不必要に複雑になるようです、そしてそれはおそらくあなたのアプリを壊すものです。ステロイドが未定義のミックス剤について不明瞭なミックスの中で不適切なステロイドのないステロイドプロジェクト内でイオンを得る方法について説明します。

  1. ステロイドプロジェクトを作成する
  2. ダウンロードこちら
  3. Steroids Projectをフォルダwww/vendorに入り、新しいフォルダを作成し、「oinic」
    4. などです。
  4. 解凍したCDNから作成したファイルを作成したフォルダ
    5. にコピーします。
  5. application.js / application.css /各HTMLファイル
    6. に必要なCSS / JSファイルを含めます。

    これは助けになりますか？

メッセージcommand connect requires to be in a Steroids project directoryを見た後、私が疑問に思いました、何がステロイドプロジェクトになるのでしょうか。これは私を別の方法に導いた

  • ステロイドプロジェクトから設定ディレクトリをコピー
  • ITをイオンプロジェクトディレクトリに貼り付けます（次のWWWディレクトリ内部ではありません）
  • ステロイドプロジェクト
    • からwww / loading.htmlファイルをコピーする
  • www /ディレクトリに貼り付け（index.htmlの隣）
  • steroids connect
    • を実行します

これは、gruntfile.jsおよびpackage.jsonファイル（いくつかの手動介入が必要な場合があります）を含むエラーのためにプロジェクトをチェックするステロイドプロジェクト移行スクリプトを起動します（いくつかの手動の介入が必要な場合があります）。

私はそれがとてもシンプルだとは思わなかったか、移行スクリプトがあるでしょう - ありがとうAppgyverチーム！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top