почему основной файл scss приложения в ionic 4 не работает?

Question

Я работаю над ионным приложением, придумала некоторые стили для него и у меня возникли проблемы с app.scss.

В соответствии с ионными документами я должен иметь возможность использовать app.scss для стилей всего приложения, таких как панель инструментов и т. Д., Но ничего не происходит, когда я пытаюсь что-то стилизовать из этого файла, как будто он не включается в сборку

Первоначальный проект был выполнен путем создания приложения в CLI с опцией меню боковой панели в качестве шаблона, и все файлы scss прекрасно работают в отдельных компонентах.

Есть идеи, почему файл app.scss не работает? Я проверил элементы, которые пытался стилизовать, и они вообще не обнаруживаются.

Пример:

ion-title{
    background:red;
}

это не работает, фон панели инструментов не меняется, но это происходит через инспектор Chrome.

Я тоже пробовал это в global.scss, и все равно ничего, забавно то, что если я применяю отображение: ни один ко всем элементам, это работает:

*{
display:none;
}

похоже, что он не хочет стилизовать отдельные элементы, такие как "ion-title"

UPDATE:

Кажется, есть ошибка в ionic 4, styleUrls не примет меня, добавив ../app.scss, выдает ошибку, но я могу включить ../app.css, так что я просто собираюсь автоматически скомпилировать scss в css.

Затем я могу включить файл app.css в каждый компонент, и он работает!

Answer 1

В Ionic 4 глобальные стили по умолчанию сохраняются в src / app / global.scss

Если это проект Angular, который вы конвертируете из шаблона Ionic 3, необходимо добавить ссылку на вашглобальный файл scss в вашем файле angular.json в каталоге projects / app / architect / build / styles, как показано ниже

            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],

Это изменение по сравнению с Ionic 3, где он был в src / app / app.scss.Если вы создали проект в Ionic 3 или более ранней версии, вы должны переместить свои стили в новый global.scss, чтобы они могли применяться ко всему приложению

Answer 2

Кажется, есть ошибка в ionic 4, styleUrls не примет меня, добавив ../app.scss, выдает ошибку, но я могу включить ../app.css, так что я просто собираюсь автоматически скомпилировать scss в css.

Затем я могу включить файл app.css в каждый компонент, и он работает!

Answer 3

Вы должны включить путь к файлу app.scss в ваш app.component.ts следующим образом

styleUrls: ['app.scss']

Тогда вы сможете использовать свой файл scss