The css property

Nuxt lets you define the CSS files/modules/libraries you want to set globally (included in every page).

In case you want to use sass make sure that you have installed sass and sass-loader packages.

yarn add --dev sass sass-loader@10

npm install --save-dev sass sass-loader@10

• Type: Array
  • Items: string

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]
}

Nuxt will automatically guess the file type by its extension and use the appropriate pre-processor loader for webpack. You will still need to install the required loader if you need to use them.

Style Extensions

You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file.

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

Default order: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']