Style Extensions

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

yarn add --dev sass sass-loader@10

NPM

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

Type: Array
- Items: string

nuxt.config.js

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.

nuxt.config.js

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

If you have two files with the same name e.g. main.scss and main.css, and don't specify an extension in the css array entry, e.g. css: ['~/assets/css/main'], then only one file will be loaded depending on the order of styleExtensions. In this case only the css file will be loaded and the scss file will be ignored because css comes first in the default styleExtension array.

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

Edit this page on GitHub Updated at Thu, Feb 9, 2023