La propriété css

Nuxt permet aux fichiers/modules/librairies que l'on veut d'être définis de manière globale (inclus dans chaque page).

Si on veut utiliser SASS, il faut bien faire attention à avoir les packages sass et sass-loader d'installés. Si ce n'est pas encore le cas, on peut faire:

yarn add --dev sass sass-loader@10

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

• Type: Array
  • Items: string

export default {
  css: [
    // charge un module Node.js directement (ici c'est un fichier SASS)
    'bulma',
    // fichier CSS dans le projet
    '@/assets/css/main.css',
    // fichier SCSS dans le projet
    '@/assets/css/main.scss'
  ]
}

Nuxt va automatiquement deviner le type de fichier par son extension et utiliser le loader du pré-processeur adéquat pour Webpack. Nous aurons cependant besoin d'installer le loader requis si nous avons besoin de l'utiliser.

Extensions de style

On peut omettre l'extension de nos fichiers CSS/SCSS/Postcss/Less/Stylus/... listés dans le tableau css du fichier nuxt.config.js.

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

Ordre par défaut: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']