SCSS reference / 01

Build System

Installing Node dependencies and running the npm scripts that compile src/scss/ into the dist/css/ files every template page actually links.

Requirements

Node.js 18 or newer (Node 22 is what this template is developed and tested against) and the npm that ships with it. No global installs are required — everything the build needs lives in this folder's own package.json and installs locally into node_modules/.

1. Install dependencies

From inside the template's root folder (the one containing package.json), run:

npm install

This installs two development dependencies: sass (the Dart Sass compiler) and terser (the JavaScript minifier used for dist/js/main.min.js). Both are build-time tools only — nothing from node_modules/ ships in the final product.

2. The npm scripts

Every build task is a plain Node script under scripts/, wired up as an npm script in package.json. There's no separate task runner (no Gulp, no Webpack config) — just three small scripts and the Sass compiler.

Command	What it does
`npm run build:css`	Compiles `src/scss/tokens.scss` and `src/scss/main.scss` to `dist/css/`, each as an unminified file (`tokens.css`, `main.css`) and a minified one with a sourcemap (`tokens.min.css`, `main.min.css`, plus their `.map` files).
`npm run build:js`	Minifies `src/js/main.js` to `dist/js/main.min.js` (with a sourcemap) via Terser, and copies the unminified original alongside it as `dist/js/main.js`.
`npm run build:copy`	Copies the 16 HTML page files and the `img/` folder from `src/` straight into `dist/` — those don't need compiling, only copying.
`npm run build`	Runs all three of the above in sequence. This is the command to reach for after any source change: it always regenerates the whole `dist/` folder from scratch.
`npm run watch:css`	Watches `src/scss/` and recompiles `tokens.css` / `main.css` automatically on save, unminified, for fast iteration while you're editing.

Exact script names live in package.json

The table above reflects the scripts as shipped. If you add or rename a script, that file — not this page — is the source of truth.

3. A typical editing session

Edit a partial under src/scss/ (say, a color inside settings/_settings.tokens.scss, or a spacing value inside one of the components/ partials).
Run npm run watch:css once at the start of your session and leave it running — it recompiles dist/css/tokens.css and dist/css/main.css every time you save.
Open any page under dist/ (e.g. dist/index.html) in your browser and refresh to see the change — the pages link the unminified main.css during development for readable output.
When you're done, run npm run build once to regenerate the minified files and copy the HTML/image files, so dist/ is fully up to date and ready to ship.

4. src/ vs dist/

The template folder is split into an authoring source and a shipped output, the same src/dist shape used by well-known Sass-authored front-end kits:

fieldcraft-html/
  package.json          npm scripts (build:css, build:js, build:copy, build, watch:css)
  scripts/
    build-css.js          Compiles tokens.scss + main.scss to dist/css/
    build-js.js            Minifies src/js/main.js to dist/js/main.min.js
    copy-static.js           Copies the 16 HTML pages + img/ to dist/
  src/
    *.html                    The 16 page files (edit these)
    js/main.js                  Hand-authored JavaScript (edit this)
    scss/                        Sass source (edit these) — see SCSS Architecture
    img/                          Source photographs
  dist/
    *.html                    Copied from src/ — do not hand-edit
    css/tokens.css              Compiled from src/scss/tokens.scss
    css/tokens.min.css            Minified + sourcemap
    css/main.css                    Compiled from src/scss/main.scss
    css/main.min.css                  Minified + sourcemap
    js/main.js                          Copied from src/js/main.js
    js/main.min.js                        Minified + sourcemap
    img/                                     Copied from src/img/

dist/ is what actually ships as the ThemeForest download and what every page's <link>/<script> tag points at once built — it's generated, not hand-edited. If you only want to change colors, fonts or copy without setting up Node at all, work directly against the files under dist/ instead: see Customizing, which requires no build step. Reach for this Sass workflow when you want to extend a component, add a new one, or restructure the stylesheet itself.

What's next

Continue to SCSS Architecture to see how the Sass source itself is organized, or jump straight to Components to look up a specific UI section.