How to import custom css file in nuxt.config.js in NuxtJS?

Question

I'm trying to import a css file into Nuxt, but I cant get the background color change to red.

Where I have added a css file here folder

assets/css/main.css

In the main.css file I have the follow text to test with.

body {
    background-color: coral;
}

nuxt.config.js:

export default {
  css: [

    // Material Design Icons
    '@mdi/font/css/materialdesignicons.min.css',

    // Main style sheet
    '@/assets/css/main.css'
  ],
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) { }
  },
  buildModules: [
    // Simple usage
    //'@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { iconfont: 'mdi' }]
  ]
}

Answer 1

body {
  background-color: coral;
}

Will be overridden by vuetify's default settings. To make the background color work, you need to set it under vuetify.

You can do this by adding below line to the file variables.scss.

#app {
    background-color: coral;
  }

Where to make this change: When you generate a vuetify nuxt app then there will be a scss file generated under assets by the name variables.scss. If there is no such file, then add it and update the css as shown above.

Then you need to include the same in nuxt config

css: ['@/assets/variables.scss'],