Создание Ionic SASS с помощью хрюканья/стероидов
-
21-12-2019 - |
Вопрос
Я пытаюсь создать прототип проекта, используя ионный и Аппгивер Стероиды.У 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, чтобы стероиды не жаловались на неопределенные примеси:
- Создать проект стероидов
- Загрузите CDN Ionic framework с здесь
- Заходим в проект Steroids в папку
www/vendor
и создайте новую папку, например "ionic" - Скопируйте нужные файлы из разархивированного CDN в созданную папку.
- Включите необходимые файлы 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!