I'm new to drupal and am trying to make my own theme. Currently I have a
page.html.twig for my pages, and my css styles show up fine. However, when I added a
html--front.html.twig file, cleared the caches, and checked the homepage, there were no styles, even ones that apply to elements that are in every page (such as
body). The code in
html--front.html.twig is identical to the code in
page.html.twig. I checked the console and the front page is successfully templating from
html--front.html.twig. Every other page works fine. I just don't see why it is now ignoring all my styles for the front page. Thanks for the help.
The code in html--front.html.twig is identical to the code in page.html.twig
That's your problem - those are two different templates, it doesn't make sense for them to have the same content.
html.html.twig contains (or more accurately, renders) page.html.twig, plus the
<head> tags and all that lives within, the footer of the document, and so on. If you copied page.html into html.html, that explains why you don't see styles any more - your
<head> is gone.
It's perfectly valid to have html--front.html.twig and page--front.html.twig, or some other combination, but the html template needs to contain the outer part of the document, and the page template needs to contain the inner part.
Cache file /home/queryxchang/public_html/apps/frontend/config/../cache/-q-8-261721-custom-styles-applying-to-page-html-twig-but-not-html-front-html-twig- could not be written