[Docs] Document how to set up svelte.config.js with respect to rollup.config.js #397
Description
Trying to get the Svelte Language Server set up in VS Code for the first time, onboarding could have been smoother. I wanted to use TS and SCSS, so I followed the docs:
- https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors
- https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md
- https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md
Each of these pages mentioned a need for a svelte.config.js. It wasn't clear whether the svelte.config.js config needed to be written any differently from that of the Svelte Rollup Plugin in rollup.config.js (especially with respect to the production variable).
My understanding from @dummdidumm on Discord is that the Svelte Language Server is only (currently) interested in the preprocess export from svelte.config.js, so there's no need to write the whole config for the Svelte Rollup Plugin in there.
So I've gone with the following inheritance pattern. svelte.config.js exports both an instance of sveltePreprocess for consumption by Svelte Language Server, and also the base config for it (preprocessOptions) so that we can extend it when we create another sveltePreprocess instance in rollup.config.js:
svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
const preprocessOptions = {
sourceMap: true, // "you would always want sourcemaps for the IDE" – dummdidumm
defaults: {
script: "typescript",
style: "scss",
},
scss: {
prependData: `@import 'src/styles/_variables.scss';`
},
postcss: {
plugins: [require('autoprefixer')()]
}
};
module.exports = {
preprocess: sveltePreprocess(preprocessOptions),
// Export this to allow rollup.config.js to inherit the same preprocess options.
preprocessOptions,
}rollup.config.js
// ...
const preprocessOptions = require("./svelte.config").preprocessOptions;
const production = !process.env.ROLLUP_WATCH;
export default {
// ...
plugins: [
// ...
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
preprocess: sveltePreprocess({
...preprocessOptions,
sourceMap: !production,
}),
}),
// ...
],
};There may be a better way to solve this (e.g. if the sveltePreprocess instance had a getter for the config), but it's one potential way.
Related discussion about how rollup.config.js and svelte.config.js should relate to each other: sveltejs/svelte#1101