Parcel & Svelte：用 Sass 设计标签？

Posted 2023-03-07

【中文标题】Parcel & Svelte：用 Sass 设计标签？

【英文标题】：Parcel & Svelte: Style tags with 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>

【参考方案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 的乐趣！