diff --git a/package.json b/package.json
index 463ff8c..4271f94 100644
--- a/package.json
+++ b/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",
diff --git a/rollup.config.js b/rollup.config.js
index 0063f66..a3a40b7 100644
--- a/rollup.config.js
+++ b/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]'
}),
diff --git a/src/TestApp.ts b/src/TestApp.ts
index 18e5a4d..bfd7e36 100644
--- a/src/TestApp.ts
+++ b/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'),
diff --git a/src/assets/views/layouts/BaseLayout.svelte b/src/assets/views/layouts/BaseLayout.svelte
index 522066c..2fc2f3a 100644
--- a/src/assets/views/layouts/BaseLayout.svelte
+++ b/src/assets/views/layouts/BaseLayout.svelte
@@ -37,7 +37,7 @@
{/if}
-
+
diff --git a/src/frontend/ScssAssetPreCompiler.ts b/src/frontend/ScssAssetPreCompiler.ts
new file mode 100644
index 0000000..bcbd3cd
--- /dev/null
+++ b/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]});
+ });
+ }
+}
diff --git a/yarn.lock b/yarn.lock
index 107a184..68b480b 100644
--- a/yarn.lock
+++ b/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==