TL;DR: Overcome Nuxt.js, Bulma and Sass shenanigans with this quick article to help you start developing your next App in less than 10 minutes.
Hi everyone ❤️! Few days ago I found myself struggling a bit to put Nuxt.js, Bulma and Sass to work correctly and the info I found on google didn't help too much.
Most of the configurations I found were not working, because they were outdated or didn't explain quite well how to do it. So I deep dived a little bit on this subject and decided to write an article to help you do the same in less than 10 minutes.
Let's have some fun and get our hands dirty while grokking a few concepts needed to do this.
1. Scaffolding Nuxt.js
Nowadays, to get started quickly with Nuxt.js we use a scaffolding tool called create-nuxt-app. Please make sure you have npx installed on your machine.
Let's open a terminal and do: npx create-nuxt-app nuxt-bulma-sass, where nuxt-bulma-sass is the name of the project we're scaffolding for the purpose of this article.
create-nuxt-app will ask you some questions before creating the scaffold. For the purpose of this article I've chosen the following setup:
So, the next step will be to change directory into our project folder:
cd nuxt-bulma-sass
and launch the project with: yarn run dev. (you can also use npm if you like it)
At this point we have our project running:
And if we open our browser on localhost:3000 we'll be getting this screen:
So at this point we have the pages/index.vue on the screen, which is the first page to be rendered in your project by default.
Let's replace the content of this file by the following one:
If we inspect our page in the browser we see we got bulma installed because section is formatted according to it.
Easy peasy lemon squeezy.
Let's add a class and choose some colors:
What if we want to nest .hello-nuxt inside .edo-theme? We're going to need SASS to be able to do it.
2. Adding Sass
So, to add Sass to our project we'll need to stop our running app (Ctrl+c) and do the following:
yarn add node-sass sass-loader --dev
These are the two packages needed as dev-dependencies to be able to have Sass in our boilerplate.
Note that we're adding it as a dev dependency because we only need it while developing and at build time. After that Sass is transformed into CSS and we don't need it anymore.
Let's sneak peek my package.json for you to check it:
Okay everyone ❤️, at this point we're able to nest the classes we wanted to.
Let's run our boilerplate again: yarn run dev and do the tweaks needed ?
Noice! We already did a lot today! Go grab a coffee ☕, I'll wait for you here ?
Okay, let's abstract things a bit and create this file ~/assets/scss/main.scss and put there some classes and variables:
Nice! It's working!
Now we have two problems:
- We need to import main.scss into each one of our pages/components, which is not nice. We want to import it only once and have it available in all our <style> "bags"
- We can't use bulma sass variables (try to change the background-color from the .edo-theme class from $edo to $primary. We want to have bulma sass variables in order to override them and create new themes from there.
So... what if we want to use bulma sass variables?
3. Here comes the hard part which took me some time to understand.
Bulma is being imported in the create-nuxt-app scaffold. When you do yarn run dev there's this hidden .nuxt folder into your nuxt-bulma-sass folder.
If you take a look at App.js there:
You'll see that bulma is being imported from the node-modules when you launch dev environment.
So, importing bulma while launching nuxt.js scaffold is not okay if we want to override bulma sass variables.
Don't despair, you don't have to throw your project away. Show must go on ?
4. Using Bulma the right way ?
How do we get bulma into our boilerplate the way we need?
Let's start by commenting out @nuxtjs/bulma from the nuxt.config.js modules section (keep it on the package.json because what it does there is install bulma, it would be the same, AFAIK, as doing yarn add bulma).
Stop your running environment and do yarn run dev again.
If you take a look into ./nuxt/App you'll see that it's not importing bulma anymore.
So now what we have to do is to go to our main.scss file and import it in the last line of the file.
I've also imported bulma/sass/utilities/_all.sass for us to have the sass variables with the colors there.
Of course later you can improve it by only importing exactly what you need. But that's another story for another article ?
Well well, check your browser and see it working.
5. Yeah! It's working baby!
Now the last problem! We don't want to import it into our <style> scaffold each time we want to use it. We want it to be available as a global anywhere in the boilerplate.
The solution for this is to import a package called @nuxtjs/style-resources.
This package allows you to share variables, mixins, function across all files. No more imports needed on your <style> tag of each component or page.
Just stop your dev environment and do:
yarn add @nuxjs/style-resources Note: don't try to install it as a dev-dependency because it won't work correctly.
Also, open your nuxt.config.js file and add '@nuxtjs/style-resources' to your modules key/value.
You also need to add styleResources. Check how mine is after that ?
Do yarn run dev again and... no errors... but...
CSS classes not being imported anymore.
FML ???☠️
6. Last tweak
What's happening here?
So, from the point you import and use @nuxt/style-resources you can't import actual styles from the main.scss anymore just because they won't exist in the actual build.
So, to solve this problem:
Stop your running the boilerplate again and open your nuxt.config.js:
Add the main.scss path to the global css array, like this:
This way we make sure that global css styles are also imported into the scope of our templates.
From this point on of course you can establish an architectural pattern for your css files, create independent variable, functions and mixins files and compose stuff with some extra @imports.
In the styleResources object you have the option to include more files as you need them in your boilerplate.
Again, that's beyond the scope of this article which was to show you how to unblock from this tiny complexities that nuxt and its ecosystems introduce in our App's flow.
Hope you have enjoyed it! ❤️
Be Strong and Code On ?
7. Last but not least
You can clone my repo and play around with it.
https://github.com/evedes/nuxt-bulma-sass
Thank you very much @ruiposse for reviewing this article and for mentoring me into the vue ecosystem. ❤️
8. Bibliography
01. Nuxtjs.org
03. Bulma.io
04. Some hours around google getting frustrated and seeing people also frustrated with this ?
Hey! I'm Edo, a frontend engineer dedicated to the JavaScript stack. Nowadays I work mostly with React, Vue and all the ecosystem around.
If you liked this article you can read more here.