بناء SASS الأيوني مع الناخر/المنشطات

Question

أحاول بناء مشروع أولي باستخدام أيوني و المنشطات أبجيفر.يحتوي Ionic على مجموعة رائعة جدًا من واجهات المستخدم وعناصر القوالب، المبنية على AngularJS.وتقدم Steroids بعض الأدوات الرائعة لاختبار تطبيقات الهاتف المحمول (خادم الويب المدمج للاختبار المحلي، وعمليات النشر التلقائي، وتصحيح أخطاء weinre، وتكامل المحاكي، وسير العمل السهل للنشر على الأجهزة الحقيقية وتصحيح الأخطاء باستخدام weinre).لذا فإن تجميعهم معًا بدا وكأنه الفكرة الأكثر روعة على الإطلاق.

لقد قمت بمحاولة شجاعة (مفصلة أدناه)، والتي تبدو واعدة.ومع ذلك، عندما أقوم بتشغيل أدوات إنشاء الستيرويدات، فإنها تحاول تجميع SASS الخاص بـ Ionic، وتواجه مجموعة من الأخطاء.

تفاصيل....

لقد بدأت للتو مشروعًا جديدًا باستخدام الستيرويدات، باستخدام أمر المولد الخاص بهم:

steroids create myApp

ثم قمت بتثبيت Ionic في www/components باستخدام:

bower install driftyco/ionic-bower

ثم قمت بتنزيل أحد المشاريع الأيونية المبتدئة ودمجها يدويًا مع نموذج التعليمات البرمجية للستيرويدات.لقد استخدمت الكود الأيوني، ولكنني قمت بإعادة توجيه ما يتضمنه CSS وJS إلى www/components.ثم قمت بنسخ التضمينات من نموذج كود الستيرويدات: steroids.js, onerror.js, console.log.js, cordova.js.لقد قمت أيضًا بنسخ ملفات config.xml المتنوعة.

يمكنني تحميل بعض نماذج التعليمات البرمجية في مكان ما، لكنني لا أعتقد أن هذا هو ما تعطل بالفعل.لقد اعتقدت أنه سيكون من الجيد تقديم بعض المعلومات الأساسية.من أجل اختبار وحش فرانكنشتاين الخاص بي، قمت بالجري:

steroids connect --serve

الذي يبدأ خادم ويب صغيرًا على المنفذ 4000 ويفتح رابطًا إليه في متصفحك.ومع ذلك، عند بدء تشغيل خادم المنشطات، فإنه يكتشف ملفات SCSS ويحاول تجميعها.لا أحتاج حقًا إلى تجميعها، نظرًا لأن حزمة التعريشة تتضمن حزمًا معدة مسبقًا، ولكن بمجرد أن أعمل على الأساسيات، ربما أرغب في استخدام 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) يحاول تجميع كافة ملفات SCSS الموجودة في الدليل، بترتيب آخر.

فهل هناك طريقة لتكوين المنشطات أو grunt-contrib-sass لتجميع فقط ionic.scss؟إذا كان الأمر كذلك، كيف؟إذا فشل ذلك، كيف يمكنني تعطيل تجميع SASS في المنشطات؟

Answer 1

يستورد 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'
            }
          ]...

Answer 2

Merituuli من AppGyver هنا.

تبدو الطريقة التي قمت بها بتثبيت Ionic معقدة بشكل غير ضروري، وهذا على الأرجح ما يعطل تطبيقك.فيما يلي إرشادات حول كيفية جعل الأيونية تعمل ضمن مشروع الستيرويدات دون أن تشكو الستيرويدات من الخلطات غير المحددة:

1. إنشاء مشروع المنشطات
2. قم بتنزيل Ionic Framework CDN من هنا
3. انتقل إلى مشروع المنشطات في المجلد www/vendor وقم بإنشاء مجلد جديد مثلا "ionic"
4. انسخ الملفات التي تريدها من CDN غير المضغوط إلى المجلد الذي تم إنشاؤه
5. قم بتضمين ملفات css/js الضرورية application.js/application.css/ كل ملف HTML

هل هذا يساعد؟

Answer 3

بعد رؤية الرسالة command connect requires to be in a Steroids project directory تساءلت، ما الذي يجعل الدليل مشروعًا ستيرويديًا؟مما قادني إلى طريق آخر

• انسخ دليل التكوين من مشروع المنشطات
• الصقه في دليل مشروعك الأيوني (التالي ولكن ليس داخل دليل www)
• انسخ ملف www/loading.html من مشروع المنشطات
• الصقه في الدليل www/ (بجوار ملف Index.html)
• يجري steroids connect

يؤدي هذا إلى بدء تشغيل البرنامج النصي لترحيل مشروع المنشطات الذي يتحقق من مشروعك بحثًا عن الأخطاء بما في ذلك تحديثات ملفات Gruntfile.js وpackage.json (قد يكون بعض التدخل اليدوي ضروريًا) وهو أمر رائع للغاية.

لم أكن أعتقد أن الأمر سيكون بهذه البساطة أو أنه سيكون هناك برنامج نصي للترحيل - شكرًا لفريق AppGyver!