Создание Ionic SASS с помощью хрюканья/стероидов

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

Вопрос

Я пытаюсь создать прототип проекта, используя ионный и Аппгивер Стероиды.У Ionic очень хороший набор пользовательских интерфейсов и шаблонов, построенных на основе AngularJS.А Steroids предлагает несколько замечательных инструментов для тестирования мобильных приложений (встроенный веб-сервер для локального тестирования, автоматическое развертывание, отладка weinre, интеграция эмулятора, простой рабочий процесс для развертывания на реальных устройствах и отладки с помощью weinre).Так что объединить их вместе казалось самой потрясающей идеей на свете.

Я предпринял отважную попытку (подробно описанную ниже), которая выглядит многообещающе.Однако когда я запускаю инструменты сборки Steroids, они пытаются скомпилировать SASS Ionic и обнаруживают кучу ошибок.

Подробности....

Я только что начал новый проект со стероидами, используя команду их генератора:

steroids create myApp

Затем я установил Ionic в www/Components с помощью:

bower install driftyco/ionic-bower

Затем я скачал один из Ионные стартовые проекты и вручную объединил его с примером кода Steroids.Я использовал код Ionic, но перенаправил CSS и JS на www/comComponents.Затем я скопировал включения из примера кода Steroids: steroids.js, onerror.js, console.log.js, cordova.js.Я также скопировал различные файлы config.xml.

Я могу загрузить куда-нибудь пример кода, но не думаю, что это именно то, что сломалось.Я просто подумал, что было бы неплохо рассказать немного предыстории.Чтобы протестировать моего монстра Франкенштейна, я запустил:

steroids connect --serve

который запускает небольшой веб-сервер на порту 4000 и открывает ссылку на него в вашем браузере.Однако при запуске сервера стероидов он обнаруживает файлы 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) пытается скомпилировать все файлы SCSS в каталоге в каком-то другом порядке.

Итак, есть ли способ настроить стероиды или grunt-contrib-sass просто скомпилировать ionic.scss?Если да, то как?В противном случае, как я могу отключить компиляцию SASS в Steroids?

Это было полезно?

Решение

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'
            }
          ]...

Другие советы

Меритуули из AppGyver здесь.

Способ установки Ionic кажется излишне сложным, и это, вероятно, сломает ваше приложение.Вот инструкции о том, как заставить Ionic работать в проекте Steroids, чтобы стероиды не жаловались на неопределенные примеси:

  1. Создать проект стероидов
  2. Загрузите CDN Ionic framework с здесь
  3. Заходим в проект Steroids в папку www/vendor и создайте новую папку, например "ionic"
  4. Скопируйте нужные файлы из разархивированного CDN в созданную папку.
  5. Включите необходимые файлы css/js в application.js/application.css/каждый HTML-файл

Это помогает?

После просмотра сообщения command connect requires to be in a Steroids project directory Мне было интересно, что делает каталог стероидным проектом?Это привело меня к другому пути

  • Скопируйте каталог конфигурации из проекта стероидов.
  • Вставьте его в каталог вашего ионного проекта (следующий, но НЕ внутри каталога www).
  • Скопируйте файл www/loading.html из проекта стероидов.
  • Вставьте его в каталог www/ (рядом с index.html).
  • Бегать steroids connect

Это запустит сценарий миграции проекта стероидов, который проверяет ваш проект на наличие ошибок, включая обновления файлов Gruntfile.js и package.json (может потребоваться некоторое ручное вмешательство), что просто великолепно.

Я не думал, что это будет так просто или будет скрипт миграции — спасибо команде AppGyver!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top