For the styling of this project, we'll simply be going to use a CSS framework like Bulma to speed things up. Bulma is a CSS framework that uses SASS and flexbox to make things very easy to customise. We need to first configure webpack to be able to handle sass files by using the following command.
npm install sass-loader node-sass --save-dev
This will install the sass-loader in your node_modules folder. We now need to tell webpack how to handle these sass files, navigate to /vue-wordpress-theme/build/webpack.base.conf.js and you'll need to add the following inside module.rules.
{
test: /\.scss$/,
loader: ['style','css', 'sass'],
},
Webpack will now search through any .scss files and compile them using the style loader, css loader and sass loader. When this is installed we can either handle the CSS in two ways, we can either add CSS directly inside the Vue component in a style tag or we can create a global sass area for the styles. I like to work by having a global area for the sass styles and then add specific component styles inside the Vue component. If you want to add styles in the component just add the style tag using the lang attribute lang="scss".
<style lang="scss">
// Add styles here
</style>
When webpack compiles your VueJS templates it will find your scss styles and compiles this into the output styling. To have a global scss style tag you can start by creating your own sass folder inside /src/sass then create a global.scss we can now reference this inside the App.vue file by adding the following line.
<style src="./sass/global.scss" lang="scss"></style>
Now we can install Bulma by using NPM again with the command.
npm install bulma
This will install bulma inside the node_modules files we can now reference this inside our global.scss by using the command
@import '~bulma';
When webpack is compiled next it will find the bulma files and include this into the compiled version of your CSS. If you look at your web page in the browser you'll now see that it's now using the bulma styles. Any additional styles can simply be added to the global.scss file and we can start styling the theme from there.