Parcel & Svelte：使用 Sass 的样式标签？

Question

我正在使用Svelte和Parcel以及Sass，但无法在<style>标签中获取任何 scss 来正确渲染。下面是我正在使用的示例。

<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在项目的根目录创建一个文件
2. svelte-preprocess使用npm或yarn安装
3. svelte.config.js在文件中使用以下代码

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

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

4. 将 'lang=scss' 添加到您的样式标签中，如下例所示

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

5. 享受在Svelte组件中编写Sass 的乐趣！