package.json

@@ -73,7 +73,6 @@
         "rollup-plugin-css-only": "^3.1.0",
         "rollup-plugin-imagemin": "^0.4.1",
         "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,12 +1,10 @@
 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";
 import imageminPlugin from "rollup-plugin-imagemin";
 
 const production = process.env.ENV === 'production';
@@ -29,19 +27,6 @@ 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]);
-                    }
-                }
-            },
-        }),
         imageminPlugin({
             fileName: '../img/[name][extname]'
         }),

src/TestApp.ts

@@ -34,6 +34,7 @@ import AssetCompiler from "./frontend/AssetCompiler.js";
 import CopyAssetPreCompiler from "./frontend/CopyAssetPreCompiler.js";
 import MailViewEngine from "./frontend/MailViewEngine.js";
 import NunjucksViewEngine from "./frontend/NunjucksViewEngine.js";
+import ScssAssetPreCompiler from "./frontend/ScssAssetPreCompiler.js";
 import SvelteViewEngine from "./frontend/SvelteViewEngine.js";
 import TypeScriptPreCompiler from "./frontend/TypeScriptPreCompiler.js";
 import BackendController from "./helpers/BackendController.js";
@@ -85,10 +86,11 @@ export default class TestApp extends Application {
 
         // Dynamic views and routes
         const intermediateDirectory = 'intermediates/assets';
+        const assetCompiler = new AssetCompiler(intermediateDirectory, 'public');
         this.use(new FrontendToolsComponent(
-            new AssetCompiler(intermediateDirectory, 'public'),
+            assetCompiler,
             new CopyAssetPreCompiler(intermediateDirectory, '', 'json', ['test/assets'], false),
-            new CopyAssetPreCompiler(intermediateDirectory, 'scss', 'scss', ['test/assets'], true),
+            new ScssAssetPreCompiler(intermediateDirectory, assetCompiler.targetDir, 'scss', ['test/assets']),
             new CopyAssetPreCompiler(intermediateDirectory, 'img', 'svg', ['test/assets'], true),
             new TypeScriptPreCompiler(intermediateDirectory, ['test/assets']),
             new SvelteViewEngine(intermediateDirectory, 'test/assets'),

src/assets/views/layouts/BaseLayout.svelte

@@ -37,7 +37,7 @@
         <meta http-equiv="refresh" content={refresh_after}>
     {/if}
 
-    <link rel="stylesheet" href="/css/bundle.css">
+    <link rel="stylesheet" href="/css/layout.css">
 </svelte:head>
 
 <header>

src/frontend/ScssAssetPreCompiler.ts

@@ -0,0 +1,25 @@
+import child_process from "child_process";
+import path from "path";
+
+import {logger} from "../Logger.js";
+import CopyAssetPreCompiler from "./CopyAssetPreCompiler.js";
+
+export default class ScssAssetPreCompiler extends CopyAssetPreCompiler {
+
+    public constructor(
+        targetDir: string,
+        publicDir: string,
+        assetType: string,
+        additionalFallbackAssetPaths: string[] = [],
+        overrideTargetAssetType?: string,
+    ) {
+        super(targetDir, assetType, 'scss', additionalFallbackAssetPaths, false, overrideTargetAssetType);
+
+        publicDir = path.join(publicDir, 'css');
+
+        this.onPreCompile(async _watch => {
+            logger.info('Building scss assets...');
+            await child_process.execSync(`yarn sass ${this.actualTargetDir}:${publicDir}`, {stdio: [process.stdin, process.stdout, process.stderr]});
+        });
+    }
+}

yarn.lock

@@ -7405,13 +7405,6 @@ 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"
@@ -7430,7 +7423,7 @@ rollup-plugin-terser@^7.0.2:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.8.1, 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==