Parcel & Svelte: стили тегов с помощью Sass?

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

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

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

sass svelte parcel
person Timmy Lee    schedule 07.01.2020    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

  1. Создайте svelte.config.js файл в корне вашего проекта
  2. Установите svelte-preprocess с помощью npm или пряжи
  3. Используйте приведенный ниже код в файле svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    preprocess: sveltePreprocess(),
};
  1. Добавьте lang = scss к своим тегам стиля, как в примере ниже.
<style lang="scss">
  $base-color: #c6538c;
  $border-dark: rgba($base-color, 0.88);
  .container {
      border: 1px solid $border-dark;
   }
</style>
  1. Наслаждайтесь написанием Sass в компонентах Svelte!
person Timmy Lee    schedule 07.01.2020