50 | ```
51 |
52 | The component will be compiled to
53 |
54 | ```html
55 |
58 |
59 |
My red text
60 | ```
61 |
62 | ### Approach
63 |
64 | The default svelte scoping appends every css selectors with a unique class to only affect the elements of the component.
65 |
66 | [CSS Modules](https://github.com/css-modules/css-modules) **scopes each class name** with a unique id/name in order to affect the elements of the component. As the other selectors are not scoped, it is recommended to write each selector with a class.
67 |
68 | ```html
69 |
70 |
289 | ```
290 |
291 | When used with a class, `:local()` cssModules is replaced by the svelte scoping system. This could be useful when targetting global classnames.
292 |
293 | ```html
294 |
303 |
304 |
326 | ```
327 |
328 | ### CSS binding
329 |
330 | Link the value of a CSS property to a dynamic variable by using `bind()`.
331 |
332 | ```html
333 |
336 |
337 |
My lorem ipsum text
338 |
339 |
346 | ```
347 |
348 | A scoped css variable, binding the declared statement, will be created on the component **root** elements which the css property will inherit from.
349 |
350 | ```html
351 |
354 |
355 |
356 | My lorem ipsum text
357 |
358 |
359 |
366 | ```
367 |
368 | An object property can also be targetted and must be wrapped with quotes.
369 |
370 | ```html
371 |
376 |
377 |
473 |
474 |
488 | ```
489 |
490 |
491 | ## Import styles from an external stylesheet
492 |
493 | Alternatively, styles can be created into an external file and imported onto a svelte component. The name referring to the import can then be used on the markup to target any existing classname of the stylesheet.
494 |
495 | - The option `parseExternalStylesheet` need to be enabled.
496 | - The css file must follow the convention `[FILENAME].module.css` in order to be processed.
497 |
498 | **Note:** *That import is only meant for stylesheets relative to the component. You will have to set your own bundler in order to import *node_modules* css files.*
499 |
500 | ```css
501 | /** style.module.css **/
502 | .red { color: red; }
503 | .blue { color: blue; }
504 | ```
505 | ```html
506 |
507 |
510 |
511 |
708 | ```
709 |
710 | Pros:
711 |
712 | - creates class names with unique ID to avoid conflicts and unexpected inheritances
713 | - uses svelte scoping on non class selectors
714 | - passes scoped class name to child components
715 |
716 | Cons:
717 |
718 | - adds more weight to tag selectors than class selectors (because of the svelte scoping)
719 |
720 | ```html
721 |
779 | ```
780 |
781 | Pros:
782 |
783 | - creates class names with unique ID to avoid conflicts and unexpected inheritances
784 | - scopes every selectors at equal weight
785 |
786 | Cons:
787 |
788 | - does not pass scoped classname to child components
789 |
790 | ### Comparative
791 |
792 | | | Svelte scoping | Preprocessor Native | Preprocessor Mixed | Preprocessor Scoped |
793 | | -------------| ------------- | ------------- | ------------- | ------------- |
794 | | Scopes classes | O | O | O | O |
795 | | Scopes non class selectors | O | X | O | O |
796 | | Creates unique class ID | X | O | O | O |
797 | | Has equal selector weight | O | O | X | O |
798 | | Passes scoped classname to a child component | X | O | O | X |
799 |
800 | ## Why CSS Modules over Svelte scoping?
801 |
802 | - **On a full svelte application**: it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
803 |
804 | - **On a hybrid project** (like using svelte to enhance a web page): the default scoping may actually inherits from a class of the same name belonging to the style of the page. In that case using CSS Modules to create a unique ID and to avoid class inheritance might be advantageous.
805 |
806 | ## Configuration
807 |
808 | ### Rollup
809 |
810 | To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
811 |
812 | ```js
813 | import svelte from 'rollup-plugin-svelte';
814 | import { cssModules } from 'svelte-preprocess-cssmodules';
815 |
816 | export default {
817 | ...
818 | plugins: [
819 | svelte({
820 | preprocess: [
821 | cssModules(),
822 | ]
823 | }),
824 | ]
825 | ...
826 | }
827 | ```
828 |
829 | ### Webpack
830 |
831 | To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
832 |
833 | ```js
834 | const { cssModules } = require('svelte-preprocess-cssmodules');
835 |
836 | module.exports = {
837 | ...
838 | module: {
839 | rules: [
840 | {
841 | test: /\.svelte$/,
842 | exclude: /node_modules/,
843 | use: [
844 | {
845 | loader: 'svelte-loader',
846 | options: {
847 | preprocess: [
848 | cssModules(),
849 | ]
850 | }
851 | }
852 | ]
853 | }
854 | ]
855 | }
856 | ...
857 | }
858 | ```
859 |
860 | ### SvelteKit
861 |
862 | As the module distribution is targetting `esnext`, `Node.js 14` or above is required
863 | in order to work.
864 |
865 | ```js
866 | // svelte.config.js
867 |
868 | import { cssModules } from 'svelte-preprocess-cssmodules';
869 |
870 | const config = {
871 | ...
872 | preprocess: [
873 | cssModules(),
874 | ]
875 | };
876 |
877 | export default config;
878 | ```
879 |
880 | ### Svelte Preprocess
881 |
882 | The CSS Modules preprocessor requires the compoment to be a standard svelte component (using vanilla js and vanilla css). if any other code, such as Typescript or Sass, is encountered, an error will be thrown. Therefore CSS Modules needs to be run at the very end.
883 |
884 | ```js
885 | import { typescript, scss } from 'svelte-preprocess';
886 | import { cssModules } from 'svelte-preprocess-cssmodules';
887 |
888 | ...
889 | // svelte config:
890 | preprocess: [
891 | typescript(),
892 | scss(),
893 | cssModules(), // run last
894 | ],
895 | ...
896 | ```
897 |
898 | ### Vite
899 |
900 | Set the `svelte.config.js` accordingly.
901 |
902 | ```js
903 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
904 | import { cssModules } from 'svelte-preprocess-cssmodules';
905 |
906 | export default {
907 | preprocess: [
908 | vitePreprocess(),
909 | cssModules()
910 | ]
911 | };
912 | ```
913 |
914 |
915 | ### Options
916 | Pass an object of the following properties
917 |
918 | | Name | Type | Default | Description |
919 | | ------------- | ------------- | ------------- | ------------- |
920 | | `cssVariableHash` | `{String}` | `[hash:base64:6]` | The hash type ([see locatonIdentName](#localidentname)) |
921 | | [`getLocalIdent`](#getlocalident) | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation |
922 | | [`hashSeeder`](#hashseeder) | `{Array}` | `['style', 'filepath', 'classname']` | An array of keys to base the hash on |
923 | | [`includeAttributes`](#includeattributes) | `{Array}` | `[]` | An array of attributes to parse along with `class` |
924 | | `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
925 | | [`localIdentName`](#localidentname) | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token |
926 | | `mode` | `native\|mixed\|scoped` | `native` | The preprocess mode to use
927 | | `parseExternalStylesheet` | `{Boolean}` | `false` | Enable parsing on imported external stylesheet |
928 | | `parseStyleTag` | `{Boolean}` | `true` | Enable parsing on style tag |
929 | | [`useAsDefaultScoping`](#useasdefaultscoping) | `{Boolean}` | `false` | Replace svelte scoping globally |
930 |
931 | #### `getLocalIdent`
932 |
933 | Customize the creation of the classname instead of relying on the built-in function.
934 |
935 | ```ts
936 | function getLocalIdent(
937 | context: {
938 | context: string, // the context path
939 | resourcePath: string, // path + filename
940 | },
941 | localIdentName: {
942 | template: string, // the template rule
943 | interpolatedName: string, // the built-in generated classname
944 | },
945 | className: string, // the classname string
946 | content: {
947 | markup: string, // the markup content
948 | style: string, // the style content
949 | }
950 | ): string {
951 | return `your_generated_classname`;
952 | }
953 | ```
954 |
955 |
956 | *Example of use*
957 |
958 | ```bash
959 | # Directory
960 | SvelteApp
961 | └─ src
962 | ├─ App.svelte
963 | └─ components
964 | └─ Button.svelte
965 | ```
966 | ```html
967 |
968 |
969 |
970 |
973 | ```
974 |
975 | ```js
976 | // Preprocess config
977 | ...
978 | preprocess: [
979 | cssModules({
980 | localIdentName: '[path][name]__[local]',
981 | getLocalIdent: (context, { interpolatedName }) => {
982 | return interpolatedName.toLowerCase().replace('src_', '');
983 | // svelteapp_components_button__red;
984 | }
985 | })
986 | ],
987 | ...
988 | ```
989 |
990 | #### `hashSeeder`
991 |
992 | Set the source of the hash (when using `[hash]` / `[contenthash]`).
993 |
994 | The list of available keys are:
995 |
996 | - `style` the content of the style tag (or the imported stylesheet)
997 | - `filepath` the path of the component
998 | - `classname` the local classname
999 |
1000 | *Example of use: creating a common hash per component*
1001 | ```js
1002 | // Preprocess config
1003 | ...
1004 | preprocess: [
1005 | cssModules({
1006 | hashSeeder: ['filepath', 'style'],
1007 | })
1008 | ],
1009 | ...
1010 | ```
1011 | ```html
1012 |
1013 |
1014 |
1018 | ```
1019 |
1020 | _generating_
1021 |
1022 | ```html
1023 |
1024 |
1025 |
1029 | ```
1030 |
1031 | #### `includeAttributes`
1032 |
1033 | Add other attributes than `class` to be parsed by the preprocesser
1034 |
1035 | ```js
1036 | // Preprocess config
1037 | ...
1038 | preprocess: [
1039 | cssModules({
1040 | includeAttributes: ['data-color', 'classname'],
1041 | })
1042 | ],
1043 | ...
1044 | ```
1045 | ```html
1046 |
1047 |
1048 |
1052 | ```
1053 |
1054 | _generating_
1055 |
1056 | ```html
1057 |
1058 |
1059 |
1063 | ```
1064 |
1065 | #### `localIdentName`
1066 |
1067 | Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens:
1068 |
1069 | - `[local]` the targeted classname
1070 | - `[ext]` the extension of the resource
1071 | - `[name]` the basename of the resource
1072 | - `[path]` the path of the resource
1073 | - `[folder]` the folder the resource is in
1074 | - `[contenthash]` or `[hash]` *(they are the same)* the hash of the resource content (by default it's the hex digest of the md5 hash)
1075 | - `[:contenthash::]` optionally one can configure
1076 | - other hashTypes, i. e. `sha1`, `md5`, `sha256`, `sha512`
1077 | - other digestTypes, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
1078 | - and `length` the length in chars
1079 |
1080 | #### `useAsDefaultScoping`
1081 |
1082 | Globally replace the default svelte scoping by the CSS Modules scoping. As a result, the `module` attribute to `
1101 | ```
1102 |
1103 | _generating_
1104 |
1105 | ```html
1106 |
Welcome
1107 |
1110 | ```
1111 |
1112 | **Potential issue with third party plugins**
1113 |
1114 | The preprocessor requires you to add the `module` attribute to `
1171 |
1172 |
1173 | My Modal Title
1174 |
1175 |
Lorem ipsum dolor sit, amet consectetur.
1176 |
1177 |
1181 |
1182 | ```
1183 |
1184 | *Final html code generated by svelte*
1185 |
1186 | ```html
1187 |
1204 |
1205 |
1206 | My Modal Title
1207 |
1208 |
Lorem ipsum dolor sit, amet consectetur.
1209 |
1210 |
1214 |
1215 | ```
1216 | ## License
1217 |
1218 | [MIT](https://opensource.org/licenses/MIT)
1219 |
--------------------------------------------------------------------------------
/example/rollup/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 |
4 | .DS_Store
5 |
--------------------------------------------------------------------------------
/example/rollup/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["svelte.svelte-vscode"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/rollup/README.md:
--------------------------------------------------------------------------------
1 | *Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
2 |
3 | *Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)*
4 |
5 | ---
6 |
7 | # svelte app
8 |
9 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
10 |
11 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
12 |
13 | ```bash
14 | npx degit sveltejs/template svelte-app
15 | cd svelte-app
16 | ```
17 |
18 | *Note that you will need to have [Node.js](https://nodejs.org) installed.*
19 |
20 |
21 | ## Get started
22 |
23 | Install the dependencies...
24 |
25 | ```bash
26 | cd svelte-app
27 | npm install
28 | ```
29 |
30 | ...then start [Rollup](https://rollupjs.org):
31 |
32 | ```bash
33 | npm run dev
34 | ```
35 |
36 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
37 |
38 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
39 |
40 | If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
41 |
42 | ## Building and running in production mode
43 |
44 | To create an optimised version of the app:
45 |
46 | ```bash
47 | npm run build
48 | ```
49 |
50 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
51 |
52 |
53 | ## Single-page app mode
54 |
55 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
56 |
57 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
58 |
59 | ```js
60 | "start": "sirv public --single"
61 | ```
62 |
63 | ## Using TypeScript
64 |
65 | This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
66 |
67 | ```bash
68 | node scripts/setupTypeScript.js
69 | ```
70 |
71 | Or remove the script via:
72 |
73 | ```bash
74 | rm scripts/setupTypeScript.js
75 | ```
76 |
77 | If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
78 |
79 | ## Deploying to the web
80 |
81 | ### With [Vercel](https://vercel.com)
82 |
83 | Install `vercel` if you haven't already:
84 |
85 | ```bash
86 | npm install -g vercel
87 | ```
88 |
89 | Then, from within your project folder:
90 |
91 | ```bash
92 | cd public
93 | vercel deploy --name my-project
94 | ```
95 |
96 | ### With [surge](https://surge.sh/)
97 |
98 | Install `surge` if you haven't already:
99 |
100 | ```bash
101 | npm install -g surge
102 | ```
103 |
104 | Then, from within your project folder:
105 |
106 | ```bash
107 | npm run build
108 | surge public my-project.surge.sh
109 | ```
110 |
--------------------------------------------------------------------------------
/example/rollup/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "build": "rollup -c",
7 | "dev": "rollup -c -w",
8 | "start": "sirv public --no-clear",
9 | "check": "svelte-check --tsconfig ./tsconfig.json"
10 | },
11 | "devDependencies": {
12 | "@rollup/plugin-commonjs": "^17.0.0",
13 | "@rollup/plugin-node-resolve": "^11.0.0",
14 | "@rollup/plugin-typescript": "^11.1.6",
15 | "@tsconfig/svelte": "^5.0.4",
16 | "rollup": "^3.29.5",
17 | "rollup-plugin-css-only": "^3.1.0",
18 | "rollup-plugin-livereload": "^2.0.0",
19 | "rollup-plugin-svelte": "^7.2.2",
20 | "rollup-plugin-terser": "^7.0.0",
21 | "svelte": "^4.2.19",
22 | "svelte-check": "^4.0.2",
23 | "svelte-preprocess": "^6.0.2",
24 | "tslib": "^2.7.0",
25 | "typescript": "^5.6.2"
26 | },
27 | "dependencies": {
28 | "sass": "^1.79.1",
29 | "sirv-cli": "^1.0.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/example/rollup/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/micantoine/svelte-preprocess-cssmodules/29ab98972e32f48949c435fb213e053a1d0d95db/example/rollup/public/favicon.png
--------------------------------------------------------------------------------
/example/rollup/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 |
15 | a {
16 | color: rgb(0,100,200);
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | a:visited {
25 | color: rgb(0,80,160);
26 | }
27 |
28 | label {
29 | display: block;
30 | }
31 |
32 | input, button, select, textarea {
33 | font-family: inherit;
34 | font-size: inherit;
35 | -webkit-padding: 0.4em 0;
36 | padding: 0.4em;
37 | margin: 0 0 0.5em 0;
38 | box-sizing: border-box;
39 | border: 1px solid #ccc;
40 | border-radius: 2px;
41 | }
42 |
43 | input:disabled {
44 | color: #ccc;
45 | }
46 |
47 | button {
48 | color: #333;
49 | background-color: #f4f4f4;
50 | outline: none;
51 | }
52 |
53 | button:disabled {
54 | color: #999;
55 | }
56 |
57 | button:not(:disabled):active {
58 | background-color: #ddd;
59 | }
60 |
61 | button:focus {
62 | border-color: #666;
63 | }
64 |
--------------------------------------------------------------------------------
/example/rollup/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/rollup/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import commonjs from '@rollup/plugin-commonjs';
3 | import resolve from '@rollup/plugin-node-resolve';
4 | import livereload from 'rollup-plugin-livereload';
5 | import { terser } from 'rollup-plugin-terser';
6 | import sveltePreprocess, { typescript as typescriptSvelte, scss } from 'svelte-preprocess';
7 | import typescript from '@rollup/plugin-typescript';
8 | import css from 'rollup-plugin-css-only';
9 | import { cssModules, linearPreprocess } from '../../dist/index';
10 |
11 | const production = !process.env.ROLLUP_WATCH;
12 |
13 | function serve() {
14 | let server;
15 |
16 | function toExit() {
17 | if (server) server.kill(0);
18 | }
19 |
20 | return {
21 | writeBundle() {
22 | if (server) return;
23 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
24 | stdio: ['ignore', 'inherit', 'inherit'],
25 | shell: true
26 | });
27 |
28 | process.on('SIGTERM', toExit);
29 | process.on('exit', toExit);
30 | }
31 | };
32 | }
33 |
34 | export default {
35 | input: 'src/main.ts',
36 | output: {
37 | sourcemap: true,
38 | format: 'iife',
39 | name: 'app',
40 | file: 'public/build/bundle.js'
41 | },
42 | plugins: [
43 | svelte({
44 | // preprocess: sveltePreprocess({ sourceMap: !production }),
45 | preprocess: linearPreprocess([
46 | typescriptSvelte(),
47 | scss(),
48 | cssModules(),
49 | ]),
50 |
51 | compilerOptions: {
52 | // enable run-time checks when not in production
53 | dev: !production
54 | }
55 | }),
56 | // we'll extract any component CSS out into
57 | // a separate file - better for performance
58 | css({ output: 'bundle.css' }),
59 |
60 | // If you have external dependencies installed from
61 | // npm, you'll most likely need these plugins. In
62 | // some cases you'll need additional configuration -
63 | // consult the documentation for details:
64 | // https://github.com/rollup/plugins/tree/master/packages/commonjs
65 | resolve({
66 | browser: true,
67 | dedupe: ['svelte']
68 | }),
69 | commonjs(),
70 | typescript({
71 | sourceMap: !production,
72 | inlineSources: !production
73 | }),
74 |
75 | // In dev mode, call `npm run start` once
76 | // the bundle has been generated
77 | !production && serve(),
78 |
79 | // Watch the `public` directory and refresh the
80 | // browser on changes when not in production
81 | !production && livereload('public'),
82 |
83 | // If we're building for production (npm run build
84 | // instead of npm run dev), minify
85 | production && terser()
86 | ],
87 | watch: {
88 | clearScreen: false
89 | }
90 | };
91 |
--------------------------------------------------------------------------------
/example/rollup/src/App.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
Hello {name}!
7 |
Visit the Svelte tutorial to learn how to build Svelte apps.
8 |
9 |
10 |
--------------------------------------------------------------------------------
/example/rollup/src/global.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/example/rollup/src/main.ts:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 |
3 | const app = new App({
4 | target: document.body,
5 | props: {
6 | name: 'world'
7 | }
8 | });
9 |
10 | export default app;
--------------------------------------------------------------------------------
/example/rollup/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/svelte/tsconfig.json",
3 |
4 | "include": ["src/**/*"],
5 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6 | }
--------------------------------------------------------------------------------
/example/svelte-kit/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 |
--------------------------------------------------------------------------------
/example/svelte-kit/README.md:
--------------------------------------------------------------------------------
1 | # create-svelte
2 |
3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
4 |
5 | ## Creating a project
6 |
7 | If you're seeing this, you've probably already done this step. Congrats!
8 |
9 | ```bash
10 | # create a new project in the current directory
11 | npm init svelte@next
12 |
13 | # create a new project in my-app
14 | npm init svelte@next my-app
15 | ```
16 |
17 | > Note: the `@next` is temporary
18 |
19 | ## Developing
20 |
21 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
22 |
23 | ```bash
24 | npm run dev
25 |
26 | # or start the server and open the app in a new browser tab
27 | npm run dev -- --open
28 | ```
29 |
30 | ## Building
31 |
32 | Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
33 |
34 | ```bash
35 | npm run build
36 | ```
37 |
38 | > You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
39 |
--------------------------------------------------------------------------------
/example/svelte-kit/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "$lib": ["src/lib"],
6 | "$lib/*": ["src/lib/*"]
7 | }
8 | },
9 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
10 | }
11 |
--------------------------------------------------------------------------------
/example/svelte-kit/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-kit",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "dev": "svelte-kit dev",
6 | "build": "svelte-kit build",
7 | "preview": "svelte-kit preview"
8 | },
9 | "devDependencies": {
10 | "@sveltejs/kit": "next",
11 | "svelte": "^5.18.0"
12 | },
13 | "type": "module"
14 | }
--------------------------------------------------------------------------------
/example/svelte-kit/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %svelte.head%
8 |
9 |
10 |