CODEWITHSUNDEEP
sasssvelteparcel
Timmy Lee
Timmy Lee

Reputation: 795

Parcel & Svelte: Style tags with Sass?

I'm using Svelte and Parcel along with Sass but can't get any scss within the <style> tags to render correctly. Below is an example of what I'm using.

<style lang="scss">
   $base-color: #c6538c;
   $border-dark: rgba($base-color, 0.88);

   .alert {
     border: 1px solid $border-dark;
   }
</style>

Upvotes: 1

Views: 443

Answers (1)

Timmy Lee
Timmy Lee

Reputation: 795

Ok! For those looking for the solution, it's actually very easy, just took me a while to find it!

  1. Create a svelte.config.js file at the root of your project
  2. Install svelte-preprocess using npm or yarn
  3. Use the below code in the svelte.config.js file
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
};
  1. Add 'lang=scss' to your style tags like the below example
<style lang="scss">
  $base-color: #c6538c;
  $border-dark: rgba($base-color, 0.88);
  .container {
      border: 1px solid $border-dark;
   }
</style>
  1. Enjoy writing Sass in your Svelte components!

Upvotes: 5

Related Questions