Que fait la compilation ?
La compilation des fichiers Sass transforme les feuilles de style avec la syntaxe spécifique à Sass comme l’imbrication des sélecteurs et les mixins en CSS normaux qui peuvent être analysés par les navigateurs.
Comment puis-je lui demander de compiler les fichiers .scss dans le dossier ci-dessus dans le dossier
public/build/css/?
Puisque vous utilisez déjà Bower qui est un paquet Node.js, je suppose que vous n’avez aucun problème à utiliser le paquet Node.js node-sass au lieu de la version Ruby originale.
D’abord, installez le paquet en utilisant npm i -D node-sass. Ensuite, créez un nouveau script à l’intérieur du package.json de votre projet:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss est maintenant votre point d’entrée où vous importez Bootstrap et vos autres feuilles de style.
// I don't know whether this path is correct// Just find out the location of "_bootstrap.scss" and then create the relative path@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";/* Your custom SCSS */Enfin, pour exécuter réellement la compilation, exécutez npm run compile-sass dans votre terminal.
Dois-je configurer de nouveaux fichiers .scss ou puis-je le configurer de manière à simplement les ajouter à ce dossier sass ?
Puisque vous ne dites jamais à node-sass de « tout compiler à l’intérieur de ce dossier » et que vous utilisez plutôt un fichier point d’entrée (main.js), lorsque vous voulez inclure un nouveau fichier, vous ajoutez simplement une directive @import avec un chemin relatif vers celui-ci.
Bonus, comment puis-je lui dire de minifier le fichier de sortie, ou non (afin que je puisse expérimenter les deux façons) ?
Pour minifier le fichier main.css résultant, je recommande csso. Vous pouvez installer son paquet CLI en utilisant npm i -D csso-cli et ensuite ajouter un autre script à votre package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"Vous pouvez ensuite exécuter ce script en utilisant npm run minify-css. Le fichier minifié sera sorti sous la forme main.min.css.
.