chore(examples): use JS import for stylesheet

examples/sapper/package.json

@@ -23,13 +23,11 @@
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
     "carbon-components-svelte": "^0.12.0",
-    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
     "rollup": "^2.3.4",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.28.0",
-    "svelte": "^3.17.3",
+    "svelte": "^3.17.3"
-    "svelte-preprocess": "^4.2.1"
   }
 }

examples/sapper/rollup.config.js

@@ -4,7 +4,6 @@ import commonjs from "@rollup/plugin-commonjs";
 import svelte from "rollup-plugin-svelte";
 import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
-import sveltePreprocess from "svelte-preprocess";
 import config from "sapper/config/rollup.js";
 import pkg from "./package.json";
 
@@ -31,7 +30,6 @@ export default {
         dev,
         hydratable: true,
         emitCss: true,
-        preprocess: sveltePreprocess(),
       }),
       resolve({
         browser: true,

examples/sapper/src/client.js

@@ -1,3 +1,4 @@
+import "carbon-components-svelte/css/all.css";
 import * as sapper from "@sapper/app";
 
 sapper.start({ target: document.querySelector("#sapper") });

examples/sapper/src/routes/_layout.svelte

@@ -18,10 +18,6 @@
   import Theme from "../components/Theme.svelte";
 </script>
 
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
-
 <Theme persist theme="g10">
   <Header segment="{segment}" />
   <Content style="background: none; padding: 1rem">