Importer et étendre Foundation for Sites 6
Foundation s’importe dans le dossier node_modules en tant que dev dependency. Depuis la racine de votre Blendid, taper:
|
1 |
yarn add https://github.com/zurb/foundation-sites.git#v6.4.3 |
…où #v6.4.3 correspond à la version de Foundation que vous souhaitez utiliser.
Ensuite, éditer le fichier config/task-config.js comme suit:
|
1 2 3 4 5 6 7 8 9 |
module.exports = { [...] stylesheets : true, stylesheets: { sass: { includePaths: ["./node_modules/foundation-sites/scss/typography", "./node_modules/foundation-sites/scss"] } }, |
Si vous ne souhaitez pas les modifier, vous pourrez utiliser les sources de Foundation consignées dans le dossier node_modules/foundation-sites/ sans avoir à les surcharger dans votre dev en ajoutant ceci au fichier src/stylesheets/app.scss:
|
1 2 |
@import "foundation"; @include foundation-everything(); |
Si vous souhaitez modifier un fichier de Foundation, vous devez obligatoirement le surcharger dans votre dev. Nous allons par exemple surcharger typography/_base.scss. Pour ce faire, nous allons être obligé de surcharger également le fichier typography/_typography.scss (sans le modifier) car il contient le @import 'base'; qui importe le fichier qu’on souhaite modifier (et node-sass includePaths n’est pas assez intelligent pour vérifier la surcharge de fichier importés dans des fichiers qui ont eux-mêmes déjà été importés).