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.