Preprocessor support (SCSS, PostCSS) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using SCSS or PostCSS in a Svelte project?

SCSS and PostCSS help write CSS more efficiently by allowing features like variables, nesting, and automatic vendor prefixing, making styles easier to manage and maintain.

intermediate

How do you enable SCSS support in a Svelte project?

Install the necessary packages like 'svelte-preprocess' and 'sass', then configure 'svelte.config.js' to use 'svelte-preprocess' with SCSS enabled.

intermediate

What role does 'svelte-preprocess' play when using PostCSS in Svelte?

'svelte-preprocess' acts as a bridge to process styles with PostCSS plugins before Svelte compiles the component, enabling features like autoprefixing and custom transformations.

beginner

How can you write SCSS inside a Svelte component's style tag?

Add the attribute lang="scss" to the <style> tag, like <style lang="scss">, so the preprocessor knows to compile SCSS syntax.

intermediate

Why is PostCSS useful for responsive design in Svelte projects?

PostCSS can automatically add vendor prefixes and support plugins that help write responsive CSS, making styles work well across different browsers and devices.

Which package is commonly used to enable SCSS preprocessing in Svelte?

A svelte-preprocess

B sass-loader

C postcss-cli

D cssnano

svelte-preprocess integrates SCSS and other preprocessors into Svelte's build process.

How do you tell Svelte to treat styles as SCSS inside a component?

A Add lang="scss" to the style tag

B Rename the file to .scss

C Use a separate .scss file only

D Add a script tag with lang="scss"

The lang attribute on the style tag signals Svelte to preprocess SCSS.

What does PostCSS mainly help with in CSS processing?

A Minifying HTML

B Compiling JavaScript

C Running Svelte components

D Adding vendor prefixes and transformations

PostCSS uses plugins to transform CSS, like adding prefixes for browser support.

Which config file do you modify to add preprocessors in a Svelte project?

A vite.config.js

B package.json

C svelte.config.js

D rollup.config.js

svelte.config.js is where you set up preprocessors like SCSS or PostCSS.

What must you install to use SCSS with svelte-preprocess?

A less

B sass

C stylus

D postcss

The 'sass' package compiles SCSS syntax and is required alongside svelte-preprocess.

Explain how to set up SCSS preprocessing in a Svelte project from scratch.

Think about packages, config, and component style tags.

Describe the benefits of using PostCSS in Svelte styling.

Focus on what PostCSS does to CSS before it reaches the browser.