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. 使用 npm 或 yarn 安装 svelte-preprocess
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！