Parcel & Svelte：Style Tag with 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 或纱线安装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的乐趣！