Preprocessor support (SCSS, PostCSS) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable SCSS preprocessing in a Svelte component.

Svelte

<style lang="[1]">
  h1 {
    color: blue;
  }
</style>

Drag options to blanks, or click blank then click option'

Ascss

Bcss

Cpostcss

Dsass

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'css' instead of 'scss' disables preprocessing.

Using 'sass' instead of 'scss' changes syntax and may cause errors.

Using lang="scss" tells Svelte to preprocess the styles with SCSS.

2fill in blank

medium

Complete the code to import a PostCSS plugin in the Svelte config file.

Svelte

import { postcss } from 'svelte-preprocess';
import autoprefixer from '[1]';

export default {
  preprocess: [
    postcss({ plugins: [autoprefixer()] })
  ]
};

Drag options to blanks, or click blank then click option'

Acssnano

Bautoprefixer

Cpostcss-nested

Dpostcss-import

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong plugin name causes runtime errors.

Forgetting to install the plugin before importing.

The autoprefixer plugin adds vendor prefixes automatically in PostCSS.

3fill in blank

hard

Fix the error in the Svelte component style tag to correctly use PostCSS.

Svelte

<style lang="[1]">
  :global(body) {
    margin: 0;
  }
</style>

Drag options to blanks, or click blank then click option'

Apostcss

Bscss

Ccss

Dsass

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'css' disables preprocessing and PostCSS plugins won't run.

Using 'scss' or 'sass' runs a different preprocessor.

Using lang="postcss" enables PostCSS preprocessing in Svelte styles.

4fill in blank

hard

Fill both blanks to configure SCSS preprocessing with source maps in Svelte config.

Svelte

import sveltePreprocess from '[1]';

export default {
  preprocess: sveltePreprocess({
    scss: {
      sourceMap: [2]
    }
  })
};

Drag options to blanks, or click blank then click option'

Asvelte-preprocess

Btrue

Cfalse

Dpostcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'postcss' instead of 'svelte-preprocess' for SCSS preprocessing.

Setting sourceMap to false disables source maps.

svelte-preprocess is the package for preprocessing. Setting sourceMap: true enables source maps for easier debugging.

5fill in blank

hard

Fill all three blanks to create a Svelte component using SCSS with a nested style and a PostCSS plugin.

Svelte

<script>
  export let color = 'red';
</script>

<style lang="[1]">
  .box {
    color: [2];
    &:hover {
      color: darken([3], 10%);
    }
  }
</style>

Drag options to blanks, or click blank then click option'

Ascss

Bcolor

C'color'

Dpostcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'postcss' as lang disables SCSS syntax like nesting.

Passing the variable without quotes inside darken causes errors.

Use lang="scss" for SCSS preprocessing. The variable color is used in styles, and it must be passed as a string 'color' inside the darken() function.

Practice

1. What attribute do you add to a <style> tag in a Svelte component to use SCSS preprocessing?

easy

A. style="scss"

B. type="scss"

C. preprocess="scss"

D. lang="scss"

Solution

1. Step 1: Understand Svelte style tag syntax

   In Svelte, to enable a CSS preprocessor like SCSS, you add an attribute to the <style> tag.

2. Step 2: Identify the correct attribute for SCSS

   The correct attribute is lang="scss", which tells Svelte to preprocess styles with SCSS.

3. Final Answer:

   lang="scss" -> Option D

4. Quick Check:

   Use lang="scss" for SCSS preprocessing [OK]

Hint: Use lang="scss" on style tag for SCSS [OK]

Common Mistakes:

• Using type="scss" instead of lang
• Adding preprocess attribute which is invalid
• Putting style="scss" which is not recognized

2. Which of the following is the correct way to enable PostCSS in a Svelte component's style block?

easy

A. <style lang="postcss">

B. <style postcss>

C. <style type="postcss">

D. <style preprocess="postcss">

Solution

1. Step 1: Recall attribute for preprocessors in Svelte

   Svelte uses the lang attribute on the <style> tag to specify preprocessors.

2. Step 2: Match the correct syntax for PostCSS

   The correct syntax is <style lang="postcss">. Other attributes like type or preprocess are not valid here.

3. Final Answer:

   <style lang="postcss"> -> Option A

4. Quick Check:

   Use lang="postcss" to enable PostCSS [OK]

Hint: Remember lang="postcss" for PostCSS styles [OK]

Common Mistakes:

• Using postcss attribute without lang
• Using type instead of lang
• Trying preprocess attribute which is invalid

3. Given this Svelte component style block:

<style lang="scss">
$primary-color: #3498db;
.button {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
</style>

What will be the color of the button text on hover?

medium

A. #3498db

B. A color 10% darker than #3498db

C. An error because darken() is not supported

D. Transparent

Solution

1. Step 1: Understand SCSS variable and nesting

   The variable $primary-color is set to #3498db. The nested hover selector uses darken($primary-color, 10%).

2. Step 2: Know SCSS darken() function behavior

   The darken() function reduces brightness by 10%, so the hover color is a darker shade of #3498db.

3. Final Answer:

   A color 10% darker than #3498db -> Option B

4. Quick Check:

   SCSS darken() darkens color by given percent [OK]

Hint: darken() in SCSS darkens color by given percent [OK]

Common Mistakes:

• Thinking darken() is unsupported in Svelte
• Assuming hover color stays the same
• Confusing variable syntax with CSS custom properties

4. You wrote this Svelte style block:

<style lang="scss">
$color: red
.button { color: $color; }
</style>

But your app fails to compile. What is the likely cause?

medium

A. Missing semicolon after '$color: red' declaration

B. lang attribute should be 'sass' instead of 'scss'

C. Variables are not supported in Svelte styles

D. You must import SCSS files separately, not inline

Solution

1. Step 1: Check SCSS syntax in style block

   The variable declaration $color: red is missing a semicolon at the end, which is required in SCSS.

2. Step 2: Understand SCSS syntax rules

   SCSS requires semicolons after declarations. Missing it causes a compile error.

3. Final Answer:

   Missing semicolon after '$color: red' declaration -> Option A

4. Quick Check:

   SCSS needs semicolons after declarations [OK]

Hint: Check for missing semicolons in SCSS declarations [OK]

Common Mistakes:

• Using 'sass' instead of 'scss' without changing syntax
• Thinking variables are unsupported in Svelte styles
• Assuming SCSS must be imported, not inline

5. You want to use both SCSS variables and PostCSS autoprefixer in a Svelte project. Which setup correctly enables both preprocessors?

hard

A. Use lang="scss" and import PostCSS in the script block

B. Add lang="scss postcss" to the <style> tag

C. Configure svelte.config.js with svelte-preprocess using both scss and postcss options

D. Write SCSS and PostCSS code in separate <style> tags without lang attributes

Solution

1. Step 1: Understand how to enable multiple preprocessors in Svelte

   Svelte uses svelte-preprocess configured in svelte.config.js to handle multiple preprocessors like SCSS and PostCSS together.

2. Step 2: Identify correct configuration method

   You must configure svelte-preprocess with both scss and postcss options in svelte.config.js. Adding multiple lang attributes or importing PostCSS in script won't work.

3. Final Answer:

   Configure svelte.config.js with svelte-preprocess using both scss and postcss options -> Option C

4. Quick Check:

   Use svelte-preprocess config for multiple preprocessors [OK]

Hint: Use svelte-preprocess config for SCSS and PostCSS [OK]

Common Mistakes:

• Trying to add multiple lang attributes in style tag
• Importing PostCSS in script block instead of config
• Using separate style tags without lang attributes