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==