在 svelte-kit 样式标签中使用 tailwind 响应类时出现“需要分号或块”错误

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$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)

这是我的组件的代码：

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)

我不确定是什么原因导致了这个问题。我有一种感觉，这可能只是一个 svelte-kit bug。我知道有一些解决方法，例如使用 vanilla css 来实现响应而不是 tailwind 类，或者使用外部 css 文件，但我宁愿不使用这些选项，因为我非常喜欢 tailwind 类。

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

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

版本信息：

• 苗条套件：1.0.0-next.109
• 顺风CSS：2.1.2
• 维特：2.3.4

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

Answer 1

看起来您需要添加一个 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文件如下所示：

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

我相信这应该可行，但当我尝试时，你的风格似乎被打破了。为了解决这个问题，我将@tailwind指令从您的文件中移出__layout.svelte并放入一个app.postcss文件中（在您的 旁边app.html，内部/src/src）。__layout.svelte通过导入以下样式表来在您的样式表中使用它：

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

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