SvelteKit

npm init svelte@next project-name

package.json 수정

svelte": "3.40.1"

npx svelte-add@latest postcss

npx svelte-add@latest tailwindcss

Work around is to explicitly use svelte version 3.40.1, “svelte”: “3.40.1” in package.json

svelte": "3.40.1"

tailwind

• https://github.com/sveltejs/kit
• https://kit.svelte.dev/docs
• https://github.com/dansvel/sveltekit-typescript-postcss-tailwind2/blob/master/svelte.config.cjs

# create the project
mkdir my-app
cd my-app
npm init svelte@next
 
# install dependencies
npm install
 
# start dev server and open a browser tab
npm run dev -- --open

npm i @sveltejs/adapter-netlify -D

package.json

{
	"name": "brandit-admin-sveltekit",
	"version": "0.0.1",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"start": "svelte-kit start"
	},
	"devDependencies": {
		"@sveltejs/adapter-netlify": "next",
		"@sveltejs/adapter-node": "next",
		"@sveltejs/kit": "next",
		"sass": "^1.0.0",
		"svelte": "^3.29.0",
		"svelte-preprocess": "^4.0.0",
		"vite": "^2.1.0"
	},
	"type": "module",
	"engines": {
		"node": ">= 12.17.0"
	},
	"dependencies": {
		"node-fetch": "^2.6.1"
	}
}

svelte.config.cjs

const sveltePreprocess = require("svelte-preprocess");
const node = require("@sveltejs/adapter-node");
const static = require("@sveltejs/adapter-static");
const netlify = require("@sveltejs/adapter-netlify");
const pkg = require("./package.json");

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
  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: node(),
    adapter: netlify(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
    },
  },
};

netlify.toml

[build]
  command = "npm run build"
  publish = "build"
  functions = "functions"

• https://github.com/jasongitmail/svelte-vs-next