Logo

菜单

发布于 2026-01-06 5 阅读
0

Sveltekit Vite with Tailwind 2 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

Sveltekit Vite 与 Tailwind 2

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

svelte@next 搭配 postcss 和 tailwind

更新 ：

5. 更新至 SvelteKit Vite，一切正常。此帖已过时，不再维护，请查看仓库
。4. 添加示例
3.run build导出静态build/目录
2. 修复run build错误
1. 修复重大错误

停止

Pump the brakes! A little disclaimer...

svelte@next is not ready for use yet. It definitely can't
run your apps, and it might not run at all.

We haven't yet started accepting community contributions,
and we don't need people to start raising issues yet.

Given these warnings, please feel free to experiment, but
you're on your own for now. We'll have something to show
soon.
Enter fullscreen mode Exit fullscreen mode

Sapper v1 将永远不会发布，取而代之的是 Svelte 的进一步开发。更多信息，请查看 dev.to 上 jessenkinner 的帖子：Sapper 已死，Svelte 的下一步是什么？

然而，这并没有阻止我全心全意地尝试。

顺便一提，我最近才了解到 pnpm，很高兴能认识并使用它。所以我打算用 pnpmpnpm代替npm或yarn，尽管它们用途相同。

创建 Svelte 项目

目前，如果您已经pnpm安装了以下软件，则可以在终端中运行此命令：

pnpm init svelte@next svelte-next
cd svelte-next
pnpm i
Enter fullscreen mode Exit fullscreen mode

项目目录的名称在哪里svelte-next？您可以选择是否使用 TypeScript。

在继续之前，我们可以通过运行以下命令并在浏览器中访问来确保当前版本“可以”进行开发。localhost:3000

pnpm run dev
Enter fullscreen mode Exit fullscreen mode

如果你遇到类似这样的错误

Error: NOT_FOUND
    at Object.loadUrl (C:\Users\hp\www\sveltest\node_modules\.pnpm\snowpack@3.0.0-rc.2\node_modules\snowpack\src\commands\dev.ts:607:13)
    at C:\Users\hp\www\sveltest\node_modules\.pnpm\@sveltejs\kit@1.0.0-next.15\node_modules\@sveltejs\kit\src\api\dev\index.js:167:14
Enter fullscreen mode Exit fullscreen mode

看起来是积雪结构有问题，所以plugins把这行代码改成这样。

    plugins: [
        [
            "@snowpack/plugin-svelte",
            {
                compilerOptions: {
                    hydratable: true
                }
            }
        ],
        '@snowpack/plugin-typescript'
    ],
Enter fullscreen mode Exit fullscreen mode

停止并重新运行开发服务器

设置预处理

如果您未使用 TypeScript，则需要手动运行以下命令添加预处理。

pnpm i -D svelte-preprocess
Enter fullscreen mode Exit fullscreen mode

然后应用预处理，将 PostCSS 添加到 Svelte 中。

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        sveltePreprocess({
            defaults: {
                script: 'typescript',
                style: 'postcss',
            },
            postcss: true
        }),
    ],
    kit: {
        // By default, `npm run build` will create a standard Node app.
        // You can create optimized builds for different platforms by
        // specifying a different adapter
        adapter: '@sveltejs/adapter-node',

        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};
Enter fullscreen mode Exit fullscreen mode

该default对象属性定义了组件的默认语言。因此，上面的配置将 TypeScript 设置为默认语言，从而无需lang="ts"在 script 标签和lang="postcss"style 标签中添加任何语言。

添加 PostCSS 和 Tailwind

pnpm add -D @snowpack/plugin-postcss postcss postcss-cli postcss-load-config postcss-preset-env
pnpm add -D tailwindcss autoprefixer cssnano
Enter fullscreen mode Exit fullscreen mode

因为 svelte@next 仍在开发中，您可能不想将其投入生产，如果您不需要它们autoprefixer，您可以直接跳过。cssnano

我只是用postcss-preset-env它来做嵌套，你也可以使用其他插件，比如postcss-nesting其他插件。

设置 PostCSS

编辑积雪配置文件

// snowpack.config.js
// Consult https://www.snowpack.dev to learn about these options
module.exports = {
    extends: '@sveltejs/snowpack-config',
    plugins: [
        [
            '@snowpack/plugin-build-script',
            {
                cmd: "postcss",
                input: [".css", ".pcss"],
                output: [".css"],
            }
        ],
        [
            "@snowpack/plugin-svelte",
            {
                compilerOptions: {
                    hydratable: true
                }
            }
        ],
        '@snowpack/plugin-typescript'
    ],
    mount: {
        'src/components': '/_components'
    },
    alias: {
        $components: './src/components'
    }
};
Enter fullscreen mode Exit fullscreen mode

在项目根文件夹中创建 PostCSS 配置文件。类似这样。

// postcss.config.js
const mode = process.env.NODE_ENV;
const dev = mode === "development";

module.exports = {
    plugins: [
        require('postcss-preset-env')({stage: 1}),
        require("tailwindcss"),
        require("autoprefixer"),

        !dev && require("cssnano")({
            preset: "default",
        }),
    ],
};
Enter fullscreen mode Exit fullscreen mode

设置 Tailwind

运行此命令

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

编辑 Tailwind 配置

// taiwind.config.js
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");

module.exports = {
    purge: {
        content: [
            "./src/**/*.html",
            "./src/**/*.svelte"
        ],
        options: {
            defaultExtractor: (content) => [
                ...tailwindExtractor(content),
                ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
            ],
            keyframes: true,
        },
    },
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

tailwindExtractor 是为将来使用而准备的，所以您可以使用class:指令。

Tailwind 准备就绪

创造src\routes\global.pcss

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

然后用它来src\routes\$layout.svelte

<script>
    import './global.pcss';
</script>

<slot/>
Enter fullscreen mode Exit fullscreen mode

在src\routes\index.svelte

<script>
    import Counter from '$components/Counter.svelte';
</script>

<main>
    <h1 class="uppercase text-5xl font-extrabold my-16">Hello world!</h1>

    <Counter/>
    <p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

<style>
  main {
    @apply px-8 py-16 mx-auto max-w-5xl text-center;
  }

  * + * {
    @apply mb-0 mt-4;
  }

  p {
    @apply text-xl;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

锅炉板

Sveltekit 与 Tailwind

如果您想尝试我制作的带有深色模式切换主题的现成模板，可以点击此处查看我的代码仓库。

更新 ：

  • 要生成可部署到 Netlify 的静态网站，只需运行构建命令即可，我已经更新了仓库。
  • 在线演示

还在学习如何用英语写帖子，请见谅。

如果您发现其他错误，请留言。

谢谢

文章来源：https://dev.to/dansvel/sveltekit-svelte-next-with-tailwind-2-4dnn
使用原生 JavaScript 进...
你应该知道的26个面试官常见问题