"Semicolon or block is expected" 在 svelte-kit 样式标签中使用顺风响应类时出错

Question

在 svelte kit 组件样式标签中使用 tailwind 响应式类（例如：md:my-auto、focus:ring-0、focus:outline-none）时，出现以下错误：

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)
    at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)
    at new Parser (/var/www/html/node_modules/svelte/compiler.js:16787:22)
    at parse (/var/www/html/node_modules/svelte/compiler.js:16919:21)
    at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)
    at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)
    at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)
    at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)

这是我的组件的代码：

<script>
    export let switched = false;
</script>
<button class="switch-button transition-transform transform ease-in-out duration-300" class:-rotate-180={switched}
        on:click={()=>{switched = !switched}}>
    <span class="text-2xl md:hidden"><i class="fas fa-arrow-down"></i></span>
    <span class="text-xl hidden md:inline"><i class="fas fa-arrow-right"></i></span>
</button>
<style lang="postcss" type="text/postcss">
    .switch-button {
        @apply border-none appearance-none md:my-auto my-2 font-bold text-center rounded-full h-12 w-12 bg-red-500 text-white;
    }
    .switch-button:focus{
        @apply outline-none;
    }
    .switch-button:active{
        @apply bg-red-300;
    }
</style>

我不确定是什么导致了这个问题。我有一种感觉，它可能只是一个 svelte-kit 错误。我知道有一些变通方法，比如使用 vanilla css 代替 tailwind 类来提高响应能力，或者使用外部 css 文件，但我宁愿不使用这些选项，因为我非常喜欢顺风类.

如果您知道这里发生了什么，请告诉我，或者如果您需要有关我的项目环境的更多信息，请告诉我。提前致谢！

Link 到我的项目源代码：https://github.com/DriedSponge/GorillianCurrencyConversion

版本信息：

苗条套件：1.0.0-next.109
顺风css：2.1.2
邀请：2.3.4

（我确实在 tailwind 上启用了 jit）

Answer 1

您似乎需要添加一个 Svelte 预处理器来处理您的 PostCSS 语法（Tailwind 使用它，因为它是一个 PostCSS 插件）。由于您已经 svelte-preprocess installed in your package.json, you only need to add postcss-load-config 允许 svelte-preprocess 找到您的 postcss.config.js。

安装 postcss-load-config 使用：

npm install --save-dev postcss-load-config

接下来，您需要配置 svelte.config.js 文件以使用 svelte-preprocess。在您的情况下，您希望 svelte.config.js 文件看起来像这样：

import adapter from '@sveltejs/adapter-static'
// import the preprocessor
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // added these lines:
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null,
    }),
  },
}

export default config

我相信这个应该工作，但是当我尝试它时，你的风格似乎被打破了。为了解决这个问题，我将 @tailwind 指令从您的 __layout.svelte 中移出并移至 app.postcss 文件中（在您的 [=25= 旁边，在 /src/src 中）。在您的 __layout.svelte 中使用此样式表，方法是将其导入：

<script>
    import '../app.postcss'
</script>
<main>
<-- rest of your layout -->
</main>
<style lang="postcss">
    @import url('...');
    :global(body)  {
        background-color: #0E1013;
        font-family: Roboto, sans-serif;
    }
</style>

对于您的下一个项目，也许可以考虑使用 svelte-add to install Tailwind，它（应该）会为您处理一切。这些修复基于它为您添加的文件。

"Semicolon or block is expected" 在 svelte-kit 样式标签中使用顺风响应类时出错

"Semicolon or block is expected" error when using tailwind responsive classes in svelte-kit style tags

svelte

tailwind-css

sveltekit

"Semicolon or block is expected" 在 svelte-kit 样式标签中使用顺风响应 类 时出错

"Semicolon or block is expected" error when using tailwind responsive classes in svelte-kit style tags

svelte

tailwind-css

sveltekit

"Semicolon or block is expected" 在 svelte-kit 样式标签中使用顺风响应类时出错