Jak zkompilovat soubory SASS .scss nejzákladnějším způsobem (bez frameworku)

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.

.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.