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 的帖子和各种存储库的问题,但我无法解决这个问题。帮助将不胜感激。
| 归档时间: |
|
| 查看次数: |
799 次 |
| 最近记录: |