Use SCSS and PostCSS with Rollup

rollup.config.js

@@ -3,10 +3,12 @@ import replace from '@rollup/plugin-replace'
 import commonjs from 'rollup-plugin-commonjs'
 import svelte from 'rollup-plugin-svelte'
 import babel from 'rollup-plugin-babel'
+import sveltePreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup.js'
 import pkg from './package.json'
 
+// Define environment
 const mode = process.env.NODE_ENV
 const dev = mode === 'development'
 const legacy = !!process.env.SAPPER_LEGACY_BUILD
@@ -14,19 +16,35 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
 const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/')
 
+// Preprocessors
+const preprocess = sveltePreprocess({
+	scss: {
+		includePaths: ['node_modules', 'src']
+	},
+	postcss: {
+		configFilePath: './'
+	}
+})
+
+// Sapper Rollup config
 export default {
 	client: {
 		input: config.client.input(),
 		output: config.client.output(),
+		experimentalCodeSplitting: true,
 		plugins: [
 			replace({
 				'process.browser': true,
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
 			svelte({
+				css: css => {
+					css.write('public/bundle.css')
+				},
+				preprocess,
 				dev,
 				hydratable: true,
-				emitCss: true
+				emitCss: true,
 			}),
 			resolve({
 				browser: true,
@@ -36,19 +54,8 @@ export default {
 
 			legacy && babel({
 				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				runtimeHelpers: true,
 				exclude: ['node_modules/@babel/**'],
-				presets: [
-					['@babel/preset-env', {
-						targets: '> 0.25%, not dead'
-					}]
-				],
-				plugins: [
-					'@babel/plugin-syntax-dynamic-import',
-					['@babel/plugin-transform-runtime', {
-						useESModules: true
-					}]
-				]
+				runtimeHelpers: true
 			}),
 
 			!dev && terser({
@@ -68,6 +75,7 @@ export default {
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
 			svelte({
+				preprocess,
 				generate: 'ssr',
 				dev
 			}),
@@ -75,7 +83,7 @@ export default {
 				browser: true,
 				dedupe
 			}),
-			commonjs()
+			commonjs(),
 		],
 		external: Object.keys(pkg.dependencies).concat(
 			require('module').builtinModules || Object.keys(process.binding('natives'))
@@ -84,19 +92,19 @@ export default {
 		onwarn,
 	},
 
-	serviceworker: {
-		input: config.serviceworker.input(),
-		output: config.serviceworker.output(),
-		plugins: [
-			resolve(),
-			replace({
-				'process.browser': true,
-				'process.env.NODE_ENV': JSON.stringify(mode)
-			}),
-			commonjs(),
-			!dev && terser()
-		],
+	// serviceworker: {
+	// 	input: config.serviceworker.input(),
+	// 	output: config.serviceworker.output(),
+	// 	plugins: [
+	// 		resolve(),
+	// 		replace({
+	// 			'process.browser': true,
+	// 			'process.env.NODE_ENV': JSON.stringify(mode)
+	// 		}),
+	// 		commonjs(),
+	// 		!dev && terser()
+	// 	],
 
-		onwarn,
-	}
+	// 	onwarn,
+	// }
 }