Приложения Ionic 2 поставляются со встроенными темами по умолчанию, такими как служебные атрибуты, переменные Sass и даже сетка на основе flexbox. Но бывают случаи, когда вам может понадобиться еще больше детализации, используя модульные служебные классы CSS. В этом может помочь Basscss. Basscss — это низкоуровневый инструментарий CSS, предоставляющий разработчикам приложений дополнительный уровень инструментов, когда дело доходит до стилизации их приложений. Давайте посмотрим, как вы можете настроить Basscss для работы с вашим проектом Ionic 2.

Зависимости

Во-первых, вам нужно установить зависимости. Вам понадобится npm, и после того, как вы установите npm, вы сможете использовать его для установки Cordova и Ionic:

npm установить -g кордова

npm установить -g ионный

Затем создайте приложение Ionic с помощью Ionic 2:

ионный запуск myNewApp –v2

Затем вы можете открыть каталог myNewApp и убедиться, что оболочка вашего приложения работает с:

компакт-диск myNewApp

ионная подача

Установить Basscss

Мы собираемся использовать Sass-версию Basscss, поэтому она прекрасно интегрируется с существующей настройкой Ionic Sass:

npm установить basscss-sass – сохранить

Если вы откроете файл package.json в корне вашего проекта, вы увидите строку для basscss-sass в блоке зависимостей. Если вы откроете каталог node_modules/basscss-sass/scss, вы найдете целую кучу модулей и один корневой файл с именем «basscss.scss», который импортирует модули.

Как нам импортировать эти файлы в наше приложение Ionic? Приложения Ionic 2 используют node-sass для компиляции, что мы можем определить, открыв файл по адресу:

node_modules/@ionic/app-scripts/config/sass.config.js.

Если вы откроете этот файл, вы увидите блок для «includePaths», с помощью которого мы можем указать дополнительные каталоги для включения во время компиляции. Однако мы не хотим редактировать этот файл напрямую; он находится в нашем каталоге node_modules, и мы не хотели бы, чтобы наши изменения были перезаписаны, и этот каталог обычно не включается в репозитории.

Вместо этого скопируйте все содержимое файла sass.config.js и вставьте его в новый файл, расположенный в корне вашего приложения, в новом каталоге с именем «config»:

конфиг/sass.config.js

Получив файл sass.config.js по умолчанию, добавьте в массив includePaths новую строку, указывающую на новый каталог basscss-sass:

Далее нам нужно сообщить нашему приложению о нашем новом пользовательском файле конфигурации. Вернувшись в файл package.json нашего приложения, добавьте новый блок с именем «config», который указывает расположение нашего нового файла конфигурации:

Теперь мы можем импортировать модули Sass, как обычно, в наш файл app/app.scss:

Чтобы проверить, что все работает, убедитесь, что вы запустили свое приложение в браузере:

ионная подача

Затем добавьте один из классов Basscss к элементу H2 в src/pages/home/home.html:

Вы увидите, что окно браузера автоматически обновится, а элемент заголовка будет выделен курсивом.

Приоритет, с которым мы должны использовать все доступные параметры стиля, чтобы сделать CSS нашего приложения как можно более модульным, вероятно, должен быть следующим:

  1. Переопределение ионной переменной
  2. Ионные служебные атрибуты
  3. Утилиты Basscss

4. Стили компонентов в компоненте Angular (тема для другого дня)

5. Наши собственные модульные файлы Scss в каталоге app/src

Надеюсь, это поможет вам настроить одну из самых гибких модульных архитектур CSS для ваших проектов Ionic 2!