Preprocessor support (SCSS, PostCSS) in Svelte - Step-by-Step Execution

Concept Flow - Preprocessor support (SCSS, PostCSS)

Write Svelte component with <style lang="scss">

↓

Svelte compiler detects lang attribute

↓

Invoke SCSS/PostCSS preprocessor

↓

Preprocessor compiles SCSS/PostCSS to CSS

↓

Svelte injects compiled CSS into component

↓

Component renders with styles applied

The Svelte compiler sees the style tag with a preprocessor language, runs that preprocessor, then uses the compiled CSS in the component.

Execution Sample

Svelte

<script>
  let color = 'blue';
</script>

<style lang="scss">
  $color: blue;
  h1 { color: $color; }
</style>

<h1>Hello</h1>

A Svelte component using SCSS in the style tag with a variable for color.

Execution Table

Step	Action	Input	Output	Notes
1	Read <style> tag	lang="scss"	Detected SCSS preprocessor	Svelte sees lang attribute
2	Run SCSS preprocessor	$color: blue; h1 { color: $color; }	h1 { color: blue; }	SCSS variable replaced
3	Inject CSS	h1 { color: blue; }	CSS applied to component	Styles ready for render
4	Render component	<h1>Hello</h1>	Hello text in blue color	Styles affect output
5	Exit	No more steps	Component rendered with styles	Process complete

💡 All steps done, component rendered with preprocessed styles

Variable Tracker

Variable	Start	After SCSS compile	Final
color	blue	blue	blue

Key Moments - 3 Insights

Why does Svelte need the lang attribute in the style tag?

The lang attribute tells Svelte which preprocessor to run, as shown in execution_table step 1.

How does the SCSS variable $color become a real color in CSS?

The SCSS preprocessor replaces $color with its value during compilation, shown in step 2.

When are the styles actually applied to the component?

After preprocessing, Svelte injects the compiled CSS before rendering, as in step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2?

A Svelte detects the lang attribute

B Component renders on screen

C Svelte compiles the SCSS to CSS

D Styles are injected into the component

💡 Hint

Check the 'Action' and 'Output' columns at step 2 in the execution_table

At which step does the component actually display styled content?

A Step 1

B Step 4

C Step 3

D Step 5

💡 Hint

Look for 'Render component' and 'Hello text in blue color' in the execution_table

If you remove lang="scss" from the style tag, what changes in the execution?

A Svelte treats styles as plain CSS, no preprocessing

B Svelte still runs SCSS preprocessor

C Component fails to render

D Styles are injected twice

💡 Hint

Refer to step 1 where lang attribute detection triggers preprocessing

Concept Snapshot

Svelte supports preprocessors like SCSS/PostCSS via <style lang="scss">.
Svelte detects lang attribute, runs preprocessor, then injects compiled CSS.
Use variables and nesting in SCSS; output is plain CSS applied to component.
Without lang, styles are treated as plain CSS.
Preprocessing happens before component renders.

Full Transcript

This visual trace shows how Svelte handles preprocessor support for SCSS and PostCSS. First, Svelte reads the style tag and detects the lang attribute indicating SCSS. Then it runs the SCSS preprocessor which compiles SCSS code with variables into plain CSS. Next, Svelte injects this compiled CSS into the component. Finally, the component renders with the styles applied, such as colored text. The SCSS variable '$color' starts as 'blue' and is replaced during SCSS compilation. Key moments include understanding the role of the lang attribute, how SCSS variables become CSS values, and when styles apply. The quizzes test knowledge of these steps and effects of removing the lang attribute.