What is the best way of using normalize.css in Nuxt.js projects?

Question

I have scaffolded a new Nuxt.js project using npx create-nuxt-app command and used Bulma for UI framework. I learned that bulma.css file has been included in nuxt.config.js file with the following configuration.

modules: [
  '@nuxtjs/bulma'
]

But then I want to use normalize.css to make sure the styles keep consistency in all browsers. To make this work properly, this normalize.css file should be included at the top of all css files.

I have tried importing it in layout/default.vue file like this. (I referenced this)

<style lang="scss">
  @import '~/node_modules/normalize.css/normalize.css'
</style>

But then I learned as I inspect on Chrome devtools that normalize.css file is actually included at the bottom.

The style that is included before the normalize.css is bulma.css

So the question is: How can I properly import normalize.css in this Nuxt.js project so that it is imported/included at the top of the css file list?

Answer 1

In nuxt.config.js file, I have included normalize.css as a gloabal css file like below.

css: [
 'normalize.css/normalize.css'
],

And normalize.css styles comes before bulma.css, so seems like problem solved.