I've managed to create a Svelte web component that can be used on external websites running on different frameworks.
The final problem I'm having is that Tailwind doesn't seem to be included in the final build that lands in the dist_js folder, nor are the images in static/images.
I'm not sure what I'm missing here and would appreciate some help.
Command to run the build: npm run build -- --mode=development && npm run webComp
package.json
{"name": "thor","version": "0.0.1","scripts": {"dev": "vite dev","build": "vite build && npm run package","preview": "vite preview","webComp": "vite -c vite.webcomponent.config.js build","package": "svelte-kit sync && svelte-package && publint","prepublishOnly": "npm run package","lint": "prettier --check . && eslint .","format": "prettier --write ." },"exports": {".": {"types": "./dist/index.d.ts","svelte": "./dist/index.js" } },"files": ["dist","!dist/**/*.test.*","!dist/**/*.spec.*" ],"peerDependencies": {"svelte": "^4.0.0" },"devDependencies": {"@sveltejs/adapter-auto": "^3.0.0","@sveltejs/kit": "^2.0.0","@sveltejs/package": "^2.0.0","@sveltejs/vite-plugin-svelte": "^3.0.0","@types/eslint": "^8.56.0","autoprefixer": "^10.4.16","eslint": "^8.56.0","eslint-config-prettier": "^9.1.0","eslint-plugin-svelte": "^2.35.1","flowbite": "^2.3.0","flowbite-svelte": "^0.44.24","flowbite-svelte-icons": "^1.5.0","postcss": "^8.4.32","postcss-load-config": "^5.0.2","prettier": "^3.1.1","prettier-plugin-svelte": "^3.1.2","prettier-plugin-tailwindcss": "^0.5.9","publint": "^0.1.9","svelte": "^4.2.7","tailwindcss": "^3.3.6","tslib": "^2.4.1","typescript": "^5.3.2","vite": "^5.0.11" },"dependencies": {"ably": "^2.0.1","svelte-preprocess": "^5.1.3","uuidv4": "^6.2.13" },"svelte": "./dist/index.js","types": "./dist/index.d.ts","type": "module"}vite.webcomponent.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';import { defineConfig } from 'vite';import { resolve } from 'path';export default defineConfig({ build: { lib: { entry: resolve(__dirname, 'dist/index.js'), name: 'Components', fileName: 'components', }, outDir: 'dist_js', }, plugins: [ svelte(), ],});src/lib/index.js
// Reexport your entry components hereimport Main from './components/Main.svelte';export { Main };svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';import adapter from '@sveltejs/adapter-auto';/** @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() }, preprocess: [vitePreprocess({})], compilerOptions: { customElement: true },};export default config;Folder Structure
