Styling Workflow
This page covers recompiling an example's SCSS into the CSS it actually loads.
Entry Files and Output
Most examples compile sass/index.scss to css/index.css; the early 2022 examples use different names:
| Examples | SCSS entry | Output CSS |
|---|---|---|
20220409, 20220412, 20220413, 20220418 |
sass/PDWebsitemplate.min.scss |
css/PDWebsitemplate.min.css |
20220525 |
sass/PDWebsiteImitationCss.scss |
css/PDWebsiteImitationCss.css |
| The other 33 examples | sass/index.scss |
css/index.css |
Before compiling, check which file the example's index.html <link rel="stylesheet"> points to; the "Styling" section of each example page lists the matching paths.
Compile One Example
cd target/20230719
npx sass sass/index.scss css/index.css --no-source-map || { echo "SCSS build failed"; exit 1; }
Watch Mode
cd target/20230719
npx sass --watch sass/index.scss:css/index.css --no-source-map
Caveats
| Examples | Issue |
|---|---|
20220418 |
The entry's @import url("./fontawesome/css/all.css") is absent from the committed css/ output; recompiling succeeds but adds this plain CSS @import pointing to a missing file |
20220409, 20220412, 20220413, 20220418 |
Compiled CSS references ../icon/ and ../image/bg-*.svg, which are not in the folders |