Using Bulma and Font Awsome with NUXT

These days I am crushing on NUXT, tagline: Universal Vue.js Applications. I use it as a static site generator. The documentation for both NUXT and Vue.js is a joy to read making it really easy to get started.

However, some small things tripped me up in the beginning. One of them was adding Bulma and Font Awesome. It turned out to be super simple!

1. npm install bulma font-awesome --save
2. npm install sass-loader node-sass --save-dev
3. Add a css block to your nuxt.config.js:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Customize Bulma

Next up was figuring out how to use a customized version of Bulma. Also, easy peasy 😀

1. Create main.scss in the assets folder and add the customize code from Bulma:

// File: assets/main.scss
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

2. Update the import statements to work with webpack:

@import "~bulma/sass/utilities/initial-variables"
@import "~bulma/bulma"

3. Update the css block in nuxt.config.js to match the example below:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: '~assets/main.sass', lang: 'sass' },
    // { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Please let me know if you found this helpful in the comments below.

Hello World!

Again…

bgraphic.no has been with me since 2006 and have taken many forms, and have had many breaks 😉

These days I am thinking it will become a dev blog focusing on JavaScript, in many forms, as well as some advanced WordPress stuff.

I am keeping the old blog posts, and might even import the ones from way back when (if I can find the backups), as I have been using WordPress since the very beginning.

Screw work, lets play

screw-work

I love this book.

Why? Because it organized and validated what had been spinning around in my own head for such a long time.

  • I am not just a difficult employee, I’m a scanner.
  • I can do a million different projects and call it a portfolio career.
  • I’m not the only one who thinks work should feel like play!
  • I don’t have to get a job in a large corporation to be successful.

And neither do you.

Buy Screw work, let’s play  from Amazon or join the community at screwworkletsplay.com to read the first chapter for free!

I will be forever grateful to Terese who bought this on a whim, read it and thought it would be a perfect fit for me.