Restructure utility files, Use a bundle.css to fix CSS issues

rollup.config.js

@@ -5,7 +5,7 @@ import svelte from 'rollup-plugin-svelte'
 import babel from 'rollup-plugin-babel'
 // import { eslint } from 'rollup-plugin-eslint'
 // import browsersync from 'rollup-plugin-browsersync'
-import sveltePreprocess from 'svelte-preprocess'
+import autoPreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup'
 import pkg from './package.json'
@@ -19,8 +19,10 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
 
 // Preprocessors
-const preprocess = sveltePreprocess({
-	scss: { includePaths: ['node_modules', 'src'] },
+const preprocess = autoPreprocess({
+	scss: {
+		includePaths: ['src', 'node_modules'],
+	},
 	postcss: true
 })
 
@@ -33,21 +35,22 @@ export default {
 		input: config.client.input(),
 		output: {
 			...config.client.output(),
-			...dev && { exports: 'named' }
+			// ...dev && { exports: 'named' }
 		},
-		experimentalCodeSplitting: true,
+		// experimentalCodeSplitting: true,
 		plugins: [
 			// Javascript
-			svelte({
-				dev,
-				preprocess,
-				hydratable: true,
-				emitCss: true
-			}),
 			replace({
 				'process.browser': true,
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
+			svelte({
+				dev,
+				hydratable: true,
+				emitCss: false,
+				css: css => css.write('static/bundle.css'),
+				preprocess
+			}),
 			resolve({
 				browser: true,
 				extensions: ['.mjs', '.js', '.svelte', '.scss', '.json', '.html'],
@@ -84,8 +87,8 @@ export default {
 			}),
 			svelte({
 				dev,
-				preprocess,
-				generate: 'ssr'
+				generate: 'ssr',
+				preprocess
 			}),
 			resolve({
 				browser: true,