component / section

SCSS by default, plain CSS if you want it

This starter uses SCSS as an authoring format, but the final stylesheet is emitted to stable public asset paths. Backend teams consume plain CSS files, not Astro-hashed build output.

where to edit

Files that control styling

Source stylesheet

Edit src/styles/styles.scss for the starter design system and component classes.

Layout link

The layout uses /src/styles/styles.scss in dev and /assets/css/styles.min.css in build. That gives you native Astro/Vite style hot reload while preserving stable production asset paths.

Build scripts

Asset build commands live in package.json so backend handoff stays deterministic and minified.

package.json

Current scripts

"build:css": "sass src/styles/styles.scss public/assets/css/styles.css --style=expanded --no-source-map"
"build:css:min": "esbuild public/assets/css/styles.css --minify --outfile=public/assets/css/styles.min.css"
"build:js": "esbuild src/scripts/main.js --bundle --format=esm --outfile=public/assets/js/main.js"
"build:js:min": "esbuild src/scripts/main.js --bundle --format=esm --minify --outfile=public/assets/js/main.min.js"

Dev uses the SCSS source directly. Build keeps minification so backend teams receive stable, ready-to-ship assets instead of changing dev chunks.

switching to plain css

What changes

  1. Stop using src/styles/styles.scss as the source file.
  2. Maintain your source stylesheet directly at public/assets/css/styles.css.
  3. Adjust the layout if you no longer want /src/styles/styles.scss in dev.
  4. Only minify the CSS during build.
"build:css:min": "esbuild public/assets/css/styles.css --minify --outfile=public/assets/css/styles.min.css"

Same starter, different team preferences

Use SCSS when you want structured tokens and nesting. Use plain CSS when the handoff needs fewer tools. The component contracts stay the same either way.

See the showcase CTA.astro