@soleil-se/build-sass

Skript för att bygga och ladda upp Sass till filarkivet i Sitevision.

Installation

npm install @soleil-se/build-sass sass --save-dev

Användning

Lägg till följande i package.json för att kunna starta skriptet.

package.json

{
  "scripts": {
    "sass": "build-sass"
  }
}

Kommando	Beskrivning
npm run sass	Bygger ihop och laddar upp de kompilerade CSS-filerna.
npm run sass start	Bygg initialt och starta sedan övervakning av filer för att bygga ihop och ladda upp CSS-filerna.
npm run sass watch	Starta övervakning av filer för att bygga ihop och ladda upp de kompilerade CSS-filerna.

Argument

Följande argrument är tillgängliga

• --no-sync - Stänger av uppladdning till Sitevision.
• --debug - Stänger av minifiering för enklare felsökning.
• --css-prefix {value} - Prefix för ihopbyggda filer.
• --input - Anger vilken (sökväg) eller vilka (glob) filer som ska användas som utgångspunkt, ex npm run sass -- --input ./foo/bar/main.scss
• --watch - (DEPRECATED) Startar övervakning av filer.

Inställningar

Skriptet använder följande inställningar:

• Miljö
• Browserslist
• PostCSS

Input

Array eller glob som specificerar vilka filer som ska byggas, standardvärdet är ["./client_src/sass/main.scss"].

project_config.json

{
  "css": {
    "input": ["./sass/main.scss", "./sass/vendor.scss"]
  }
}

Files (DEPRECATED)

Legacyinställning.
Array som specificerar vilka filer som ska byggas om standardstrukturen (./client_src/sass) används, standardvärdet är ["main"].

project_config.json

{
  "css": {
    "files": ["main", "vendor"]
  }
}

Prefix

Man kan lägga på en prefix på filerna som byggs för att undvika krockar eller för att felsöka. Lättast är att använda css-prefix argumentet när man startar skriptet.

Om man till exempel lägger på argumentet --css-prefix=foo så kommer en fil med namnet foo.main.css byggas.

Om inställning för prefix behöver vara mer permanent kan den läggas till i CSS inställningar eller i inställningarna för en specifik miljö.
Den kan sättas i både project_config.json eller user_config.json.

project_config.json

{
 "env": {
    "development": {
      "cssPrefix": "foo"
    }
 },
 "css": {
    "prefix": "foo"
  }
}