Error in svelte.config.js and Error: Identifier is expected in scss style tag - Svelte

Question

我的一些包含 <style lang="scss"> 标签的 .svelte 文件出现以下错误。

Error in svelte.config.js

Error: Identifier is expected (23:9)
21:         flex-direction: column;
22:         align-items: center;
23:         * {
             ^
24:             padding: 0 0 1rem 0;
25:             width: 50vw;

错误总是指向同一个文件，/src/routes/blog/_blog.svelte，这是 mdsvex 的布局文件。我会忽略该错误，因为该页面可以正常工作，否则无法正常工作，但该错误使我无法运行开发服务器、构建或预览。我可以通过删除有问题的样式标签、启动服务器然后将其添加回去来解决这个问题。取消注释并保存页面后加载正常并且服务器没有错误。

违规的样式标签是：

<style lang="scss">
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        * {
            padding: 0 0 1rem 0;
            width: 50vw;
            :global(p) {
                padding-bottom: 1rem;
            }
            :global(blockquote) {
                margin: .5rem 0 1rem 1rem;
                padding: 1rem .5rem 0 1rem;
                border-left: 2px solid $orange;
            }
            :global(ul) {
                margin-top: .5rem;
            }
            :global(li) {
                margin-left: 1.5rem;
            }
            :global(code) {
                font-family: 'Courier New', Courier, monospace;
                background-color: $bg-secondary;
                padding: .25rem;
                border-radius: 5px;
            }
            :global(pre) {
                font-family: 'Courier New', Courier, monospace;
                background-color: $bg-secondary;
                padding: .25rem;
                border-radius: 5px;
                max-width: fit-content;
                margin-bottom: .5rem;
            }
            :global(img) {
                max-width: 50vw;
            }
        }
        h1,h2,h3 {
            padding-bottom: 0;
        }
    }
</style>

我的svelte.config.js是：

import adapter from '@sveltejs/adapter-auto';
import sveltePreprocess from 'svelte-preprocess';
import { mdsvex } from 'mdsvex'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    },

    extensions: ['.svelte', '.md'],
    
    preprocess: [
        sveltePreprocess({
            scss: {
                prependData: `@import './src/style/app.scss';`
            } 
        }),
        mdsvex({
            extensions: ['.md'],
            layout: {
                blog: 'src/routes/blog/_blog.svelte'
            }
        })
    ],

};
export default config;

我的版本是：

苗条：v3.46.4

svelte 预处理：v4.10.4

sass：v1.49.9

mdsvex: v0.10.5

Answer 1

看起来这是 MDsveX issue:116 中的一个错误:(

Answer 2

这与 Bob Fanger 指出的 MDsveX issue:116 有关。当前的解决方法是“将您的实际布局包装在另一个 'plain' svelte 组件中，它只传递 frontmatter 道具”（来自 GH 线程中的 jfcislak）。

新文件是：

svelte.config.js

...
preprocess: [
        sveltePreprocess({
            scss: {
                prependData: `@import './src/style/app.scss';`
            } 
        }),
        mdsvex({
            extensions: ['.md'],
            layout: {
                blog: 'src/routes/blog/blogLayout.svelte'
            }
        })
    ],
...

blogLayout.svelte

<script lang="ts">
    import Layout from './_blog.svelte'
    export let title
    export let date
</script>

<Layout title={title} date={date}>
    <slot />
</Layout>

_blog.svelte不变。

Error in svelte.config.js and Error: Identifier is expected in scss style tag - Svelte

Error in svelte.config.js and Error: Identifier is expected in scss style tag - Svelte

sass

svelte

sveltekit