package.json

@@ -67,10 +67,12 @@
         "maildev": "^1.1.0",
         "node-fetch": "^2.6.0",
         "nodemon": "^2.0.6",
+        "normalize.css": "^8.0.1",
         "require-from-string": "^2.0.2",
         "rollup": "^2.42.3",
         "rollup-plugin-css-only": "^3.1.0",
         "rollup-plugin-livereload": "^2.0.0",
+        "rollup-plugin-scss": "^3.0.0-rc1",
         "rollup-plugin-svelte": "^7.1.0",
         "rollup-plugin-terser": "^7.0.2",
         "sass": "^1.32.12",

rollup.config.js

@@ -1,10 +1,12 @@
 import path from "path";
+import fs from "fs";
 import svelte from "rollup-plugin-svelte";
 import cssOnlyRollupPlugin from "rollup-plugin-css-only";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import {terser} from "rollup-plugin-terser";
 import livereloadRollupPlugin from "rollup-plugin-livereload";
+import scssPlugin from "rollup-plugin-scss";
 
 const production = process.env.ENV === 'production';
 const buildDir = process.env.BUILD_DIR;
@@ -14,9 +16,8 @@ const input = process.env.INPUT.split(':');
 export default commandLineArgs => ({
     input: input,
     output: {
-        sourcemap: true,
         format: 'es',
-        name: 'bundle',
+        sourcemap: true,
         dir: path.join(publicDir, 'js'),
         entryFileNames: (chunkInfo) => {
             const name = chunkInfo.facadeModuleId ?
@@ -27,6 +28,20 @@ export default commandLineArgs => ({
         chunkFileNames: '[name].js',
     },
     plugins: [
+        scssPlugin({
+            output: function (styles, styleNodes) {
+                if (!fs.existsSync(path.join(publicDir, 'css'))) {
+                    fs.mkdirSync(path.join(publicDir, 'css'));
+                }
+                fs.writeFileSync(path.join(publicDir, 'css', 'bundle.css'), styles);
+                for (const node of Object.keys(styleNodes)) {
+                    if (node.endsWith('.scss')) {
+                        fs.writeFileSync(path.join(publicDir, 'css', path.basename(node, '.scss') + '.css'), styleNodes[node]);
+                    }
+                }
+            },
+        }),
+
         svelte({
             compilerOptions: {
                 dev: !production,

src/TestApp.ts

@@ -88,6 +88,7 @@ export default class TestApp extends Application {
         this.use(new FrontendToolsComponent(
             new AssetCompiler(intermediateDirectory, 'public'),
             new CopyAssetPreCompiler(intermediateDirectory, '', 'json', ['test/assets'], false),
+            new CopyAssetPreCompiler(intermediateDirectory, 'scss', 'scss', ['test/assets'], true),
             new TypeScriptPreCompiler(intermediateDirectory, ['test/assets']),
             new SvelteViewEngine(intermediateDirectory, 'test/assets'),
             new NunjucksViewEngine(intermediateDirectory, 'test/assets'),

src/assets/scss/_vars.scss

@@ -0,0 +1 @@
+$primary: #ff0080;

src/assets/scss/base.scss

@@ -0,0 +1,9 @@
+@import "../../../node_modules/normalize.css/normalize";
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: sans-serif;
+}

src/assets/scss/layout.scss

@@ -0,0 +1 @@
+@import "vars";

test/assets/views/AllTests.svelte

@@ -4,11 +4,6 @@
 </script>
 
 <style lang="scss">
-	:global(body) {
-        margin: 0;
-        font-family: sans-serif;
-    }
-
 	.render-mode {
 		text-align: center;
 		background: gray;

yarn.lock

@@ -5426,6 +5426,11 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6291,6 +6296,13 @@ rollup-plugin-livereload@^2.0.0:
   dependencies:
     livereload "^0.9.1"
 
+rollup-plugin-scss@^3.0.0-rc1:
+  version "3.0.0-rc1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-scss/-/rollup-plugin-scss-3.0.0-rc1.tgz#13caa44c5cbd366b76987c6be52f0f5c1f58ca87"
+  integrity sha512-hRDWaSCnQk5oo7au7UtYccML5ts4YopOtG6jhOzTxqY9dYg4FGUUl4gZSm18xNzikVzb073oum5C836/b9fwpg==
+  dependencies:
+    rollup-pluginutils "^2.3.3"
+
 rollup-plugin-svelte@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
@@ -6309,7 +6321,7 @@ rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==