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
yarn add --dev sass sass-loader@10 fibers
NPM
npm install --save-dev sass sass-loader@10 fibers
Compilation synchrone avec sass (augmentation de la vitesse 2x) est activée automatiquement (https://github.com/webpack-contrib/sass-loader ) lorsque fibers est installé.
  • Type: Array
    • Items: string
nuxt.config.js
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.

nuxt.config.js
export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}
Si nous avons deux fichiers du même nom, par ex main.scss et main.css et si on ne spécifie par l'extension dans le tableau css par ex css: ['~/assets/css/main'] alors seulement un fichier sera chargé en fonction de l'ordre défini par styleExtensions. Dans ce cas, le fichier css sera chargé et le scss sera ignoré parce que l'extension css arrive en premier dans le tableau styleExtension.

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

Editer cette page sur GitHub Mise à jour le jeu. 21 octobre 2021