如何在 SvelteKit 中预编译 SCSS？

Question

我正在尝试将 SCSS 添加到我的 SvelteKit 应用程序中。它在组件内工作；但是，当我将默认值转换app.css为 scss 文件并更新基本应用程序的导入时，页面会加载 FOUC。

<script context="module">
    import '../app.scss'; // Changed from .css
</script>

有没有办法让 SvelteKit 预编译样式并以与标准 CSS 文件相同的方式内联它们？

Answer 1

您可以改用 SCSS 导入：

<style lang="scss" global>
    @import '../app';
</style>

global如果您要导入全局布局样式表，则该关键字是必需的。如果省略它，导入的样式将限定在您的组件范围内。