3

在 svelte kit 组件样式标签中使用顺风响应类（例如：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$1.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$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/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 来实现响应性而不是顺风类，或者使用外部 css 文件，但我宁愿不使用这些选项，因为我非常喜欢顺风类。

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

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

版本信息：

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

（我确实在顺风时启用了 jit）

4

1 回答 1

8

看起来您需要添加一个 Svelte 预处理器来处理您的 PostCSS 语法（Tailwind 使用它，因为它是一个 PostCSS 插件）。由于你已经svelte-preprocess安装在你的package.json，你只需要添加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文件中（在你的旁边app.html，里面/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安装 Tailwind，它（应该）为您处理所有事情。这些修复基于它为您添加的文件。

于 2021-05-31T00:36:35.597 回答