Adding extra files to the theme
In the previous recipe, we learned how we can make structural changes to the HTML output. However an HTML output is not a completed website. With JavaScript and CSS, we can theme the HTML output.
Getting ready
We will learn how we can add CSS and JavaScript files to our theme. This is a common case when integrating an external JavaScript plugin. To do this, we have to work in the theme folder that we created in the recipe Creating a Magento 2 theme earlier in this chapter.
How to do it…
The following steps describe how we can add extra files to a theme:
- Open the frontend and open the HTML source of a page, and have a look at the
<head>section. We see that the included JS and CSS files are located in thepub/staticmap. - If we want to add an extra CSS file we have to configure that in the layout XML files. Open or create the file
app/design/frontend/Packt/cookbook/Magento_Theme/layout/default_head_blocks.xml. - In that file add the following content:
<...
