Now that we've got our asset build pipeline working, we can modify our theme to include the newly built CSS and JS files. Let's hard-code these into, putting the stylesheet into the header and the JavaScript into the footer.
header.php
In header.php, right before the closing </head> tag, add the following:
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/main.css">
This adds the main.css style file to your theme.
footer.php
In footer.php, right before the closing </body> tag, add the following:
<script type="text/javascript" src="<?=$view->getThemePath()?>/js/main.js"></script>
This adds the main.js JavaScript file to your theme.
Test the CSS
Now, let's make sure that the files we're working with are being properly loaded. Go back to the assets/main.scss file you created before, and add some simple style to it, like this:
body {color: red !important}
Then, rebuild the CSS with
npm run production
Once the build is complete, reload your site (clear your browser's cache if necessary) and you should see the results of your change:
It worked! Now we know that changes we make in main.scss and main.js will, when built, work properly in the theme. Now it's time for us to include Bedrock in our main.scss and main.js files.