SvelteKit:[vite] [postcss] 错误 - 未知单词

Jim*_*Jim 5 postcss svelte tailwind-css vite sveltekit

我目前正在使用 Tauri、SvelteKit 和 Tailwind 开发桌面应用程序。当我运行应用程序的开发版本时,我经常收到以下错误:

    [vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word
  Plugin: vite:css
  File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |          import { appWindow, LogicalSize } from '@tauri-apps/api/window';
     |             ^
  3  |          appWindow.setSize(new LogicalSize(700, 404));
  4  |          import { rand } from '$lib/math';
      at Input.error (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16)
      at Parser.unknownWord (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:540:22)
      at Parser.other (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:164:12)
      at Parser.parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:72:16)
      at parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/processor.js:28:14)
      at compileCSS (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14)
      at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
Run Code Online (Sandbox Code Playgroud)

如果我重新加载浏览器窗口或保存文件并热重载,则错误就会消失。此外,当我启动应用程序时,该错误并不总是发生。我想说大约 70% 的时间。

我的堆栈的配置文件是:

// postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Run Code Online (Sandbox Code Playgroud)
// tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {}
    },
    plugins: [require('daisyui')],
    daisyui: {
        themes: ['light', 'dark']
    }
};
Run Code Online (Sandbox Code Playgroud)
// vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});
Run Code Online (Sandbox Code Playgroud)
// svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import importAssets from 'svelte-preprocess-import-assets';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [importAssets(), vitePreprocess()],
};

export default config;
Run Code Online (Sandbox Code Playgroud)

如果最初启动应用程序时没有发生错误(大约 70% 的可能性),那么它很有可能会在两页后出现(主页->第 1 页->第 2 页)。我的主页和page2的代码是:

    [vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word
  Plugin: vite:css
  File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |          import { appWindow, LogicalSize } from '@tauri-apps/api/window';
     |             ^
  3  |          appWindow.setSize(new LogicalSize(700, 404));
  4  |          import { rand } from '$lib/math';
      at Input.error (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16)
      at Parser.unknownWord (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:540:22)
      at Parser.other (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:164:12)
      at Parser.parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:72:16)
      at parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/processor.js:28:14)
      at compileCSS (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14)
      at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
Run Code Online (Sandbox Code Playgroud)
// postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Run Code Online (Sandbox Code Playgroud)

这两个页面与其他页面之间的唯一主要区别是背景图像的使用,但删除这些样式并不能阻止错误的发生。我已经检查了许多其他关于 SO 的帖子和各种存储库的问题,但我无法解决这个问题。帮助将不胜感激。