Parcel & Svelte：用 Sass 设计标签？

【问题标题】：Parcel & Svelte: Style tags with Sass?Parcel & Svelte：用 Sass 设计标签？
【发布时间】：2020-04-25 00:08:43
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： sass svelte parcel

【解决方案1】：

好的！对于那些正在寻找解决方案的人来说，这实际上很容易，只是花了我一段时间才找到它！

在项目的根目录下创建一个svelte.config.js 文件
使用 npm 或 yarn 安装 svelte-preprocess
在svelte.config.js 文件中使用以下代码

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

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

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

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

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

【讨论】：