Co dělá kompilace?
Kompilování souborů Sass transformuje soubory stylů se syntaxí specifickou pro Sass, jako je vnořování selektorů a mixiny, na normální CSS, které mohou být zpracovány prohlížeči.
Jak dám pokyn ke kompilaci souborů .scss ve výše uvedené složce ve složce
public/build/css/
?
Jelikož již používáte Bower, což je balíček Node.js, předpokládám, že nemáte problém použít balíček Node.js node-sass
místo původní verze Ruby.
Nejprve nainstalujte balíček pomocí npm i -D node-sass
. Poté vytvořte nový skript uvnitř package.json
vašeho projektu:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss
je nyní vaším vstupním bodem, do kterého importujete Bootstrap a další stylesheety.
// 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 */
Nakonec, aby se kompilace skutečně spustila, spusťte npm run compile-sass
v terminálu.
Musím nakonfigurovat nové soubory .scss, nebo to mohu nastavit tak, že je prostě přidám do té složky sass?
Protože nikdy neříkáte node-sass
, aby „zkompiloval vše uvnitř této složky“, a místo toho používáte vstupní soubor (main.js
), když chcete zahrnout nový soubor, jednoduše přidáte direktivu @import
s relativní cestou k němu.
Bonus, jak mu řeknu, aby výstupní soubor minifikoval, nebo ne (abych mohl experimentovat s oběma způsoby)
Pro minifikaci výsledného souboru main.css
doporučuji csso
. Jeho CLI balíček můžete nainstalovat pomocí npm i -D csso-cli
a poté přidat další skript do package.json
:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
Tento skript pak můžete spustit pomocí npm run minify-css
. Minifikovaný soubor bude vypsán jako main.min.css
.
.