CSS

Extensions supportées : css, pcss, postcss

Les ressources CSS peuvent être importées à partir d'un fichier JavaScript ou HTML :

import './index.css'

<link rel="stylesheet" type="text/css" href="index.css">

Les ressources CSS peuvent contenir des dépendances référencées par la syntaxe @import ainsi que des références à des images, des polices, etc. via la fonction url(). Les autres fichiers CSS, qui sont @importés, sont intégrés dans le même paquet CSS, et les références de url() sont réécrites en sortie dans leurs noms de fichiers. Tous les noms des fichiers doivent être relatifs au fichier CSS courant.

/* Importe un autre fichier CSS */
@import './other.css';

.test {
  /* Référence un fichier image */
  background: url('./images/background.png');
}

En plus des simples CSS, d'autres langages compilés vers CSS comme LESS, SASS et Stylus sont également supportés, et fonctionnent de la même manière.

PostCSS

PostCSS est un outil pour transformer du CSS avec des plugins, comme autoprefixer, Preset Env, et CSS Modules. Vous pouvez configurer PostCSS avec Parcel en créant un fichier de configuration en utilisant l'un de ces noms : .postcssrc (JSON), .postcssrc.js ou postcss.config.js.

Installez les plugins dans votre application :

yarn add postcss-modules autoprefixer

Ensuite, créez un .postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Les plugins sont spécifiés dans l'objet plugins en tant que clés et les options sont définies en utilisant des valeurs d'objet. S'il n'y a pas d'options pour un plugin, définissez-le simplement à true.

Les navigateurs ciblés pour Autoprefixer, cssnext et d'autres outils peuvent être spécifiés dans le fichier .browserslistrc :

> 1%
last 2 versions

Les modules CSS sont activés légèrement différemment en utilisant la clé modules du niveau supérieur. C'est parce que Parcel doit avoir un support spécial pour les modules CSS car ils exportent un objet à inclure dans le paquet JavaScript. Notez que vous devez toujours installer postcss-modules dans votre projet.

Utilisation avec les bibliothèques CSS existantes

Pour que les modules CSS fonctionnent correctement avec les modules existants, ils doivent spécifier ce support dans leur propre .postcssrc.

Mise en place de la config de minification de cssnano

Parcel ajoute cssnano à postcss afin de minifier le css pour la construction en production. La configuration personnalisée peut être définie en créant le fichier cssnano.config.js :

module.exports = {
  preset: [
    'default',
    {
      calc: false,
      discardComments: {
        removeAll: true
      }
    }
  ]
}

Aidez-nous à améliorer la documentation

Si quelque chose manque ou n'est pas tout à fait clair, veuillez enregistrer une issue sur le dépôt du site web (en anglais) ou modifier cette page.