title: What is the best way of using normalize.css in Nuxt.js projects?
body: <p>I have scaffolded a new <a href="https://nuxtjs.org" rel="nofollow noreferrer">Nuxt.js</a> project using <code>npx create-nuxt-app</code> command and used <strong>Bulma</strong> for UI framework.
  I learned that bulma.css file has been included in <em>nuxt.config.js</em> file with the following configuration.</p>
  
  <pre><code>modules: [
    '@nuxtjs/bulma'
  ]
  </code></pre>
  
  <p>But then I want to use <a href="https://necolas.github.io/normalize.css/" rel="nofollow noreferrer">normalize.css</a> 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.</p>
  
  <p>I have tried importing it in <code>layout/default.vue</code> file like this. (I referenced <a href="https://fabiofranchino.com/blog/log/using-nuxt-and-normalize-css-to-generate-files" rel="nofollow noreferrer">this</a>)</p>
  
  <pre><code>&lt;style lang="scss"&gt;
    @import '~/node_modules/normalize.css/normalize.css'
  &lt;/style&gt;
  </code></pre>
  
  <p>But then I learned as I inspect on Chrome devtools that normalize.css file is actually included at the bottom.</p>
  
  <p><a href="https://i.stack.imgur.com/aYfcJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aYfcJ.png" alt="screenshot of element inspection on chrome devtools"></a></p>
  
  <p>The style that is included before the normalize.css is <em>bulma.css</em></p>
  
  <p>So the question is: How can I properly import <strong>normalize.css</strong> in this Nuxt.js project so that it is imported/included at the top of the css file list?</p>