我使用npm create svelte@latest my-app
创建了sveltekit应用程序
然后,我安装bootstrap使用npm install bootstrap
和导入引导css
和js
在根布局,如src/routes/+layout.svelte
含量
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import Header from './Header.svelte';
import './styles.css';
</script>
<div class="app">
<Header />
<main>
<slot />
</main>
<footer>
<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
</footer>
</div>
<style>
</style>
svelte.config.js
的含量
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
strict: true
})
}
};
npm run dev
工作正常
但是npm run build
给我错误
ReferenceError: document is not defined
at K (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:8846)
at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:9655
at /home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:84
at Object.<anonymous> (/home/alok/Alok/myapp/node_modules/bootstrap/dist/js/bootstrap.min.js:6:256)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
Node.js v18.12.1
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
at ChildProcess.<anonymous> (file:///home/alok/Alok/myapp/node_modules/@sveltejs/kit/src/utils/fork.js:67:13)
at ChildProcess.emit (node:events:513:28)
at ChildProcess._handle.onexit (node:internal/child_process:291:12)
我添加bootstrap的方法错了吗?我怎样才能建立这个项目来生成静态站点?
1条答案
按热度按时间s4n0splo1#
文档未在服务器端级别定义,因此不能这样做。你可以做的是在一个组件中使用方法导入所有文档,然后在你的层中导入该组件,如下所示:
假设我的
Slider.svelte
组件内部有bootstrap导入。这样,您只在onMount
内部导入文档相关组件,完全跳过了服务器端,没有任何错误。