Now that we've got our main.js and main.css files properly included in our theme, let's add the Bedrock base assets to them and ensure everything builds properly.
main.scss
First, open assets/scss/main.scss. It will be empty or contain the body {color: red !important} from the previous article. Either way, clear out its contents, and replace the with this:
@import "@concretecms/bedrock/assets/bedrock/scss/frontend";
Re-run npm run production. It will take a little longer this time, and should result in a larger file this time.
Reload your home page:
Everything is working. The difference here is subtle, though – the margin is completely gone, and the font has changed. That's exactly what we want, because that means the CSS reset that ships with Bootstrap 5 is working as expected, and the proper default fonts are being used instead of Times New Roman or whatever your browser defaults to.
main.js
Now let's do something similar for main.js. Open assets/js/main.js, and add the following to it:
import '@concretecms/bedrock/assets/bedrock/js/frontend';
Re-run npm run production, and it should result in a (slightly) larger main.js than before as well.
What have we done here?
These two steps have imported the standard Bedrock front-end code into our CSS and JS files. What does that mean? That means all basic building blocks for website themes that Concrete hopes will be present in your theme are now present in our theme.