Parcel & Svelte: стиль тегов с Sass?

Question

Я использую Svelte и Parcel вместе с Sass , но не могу получить s css в тегах <style> для правильной визуализации , Ниже приведен пример того, что я использую.

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

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

Answer 1

Хорошо! Для тех, кто ищет решение, на самом деле это очень просто, мне понадобилось время, чтобы найти его!

1. Создайте файл svelte.config.js в root вашего проекта
2. Установите svelte-preprocess, используя npm или пряжу
3. . Используйте приведенный ниже код в svelte.config.js файле

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
};

Добавьте 'lang = s css' к своим тегам стиля, как показано в примере ниже

<style lang="scss">
  $base-color: #c6538c;
  $border-dark: rgba($base-color, 0.88);
  .container {
      border: 1px solid $border-dark;
   }
</style>

Наслаждайтесь написанием Sass в ваших Svelte компонентах!