From 7174097388e3e7df5b2ddb2c0f53572bbd00c793 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 1 Jun 2021 16:03:07 +0200 Subject: [PATCH] Add scss assets handling --- package.json | 2 ++ rollup.config.js | 19 +++++++++++++++++-- src/TestApp.ts | 1 + src/assets/scss/_vars.scss | 1 + src/assets/scss/base.scss | 9 +++++++++ src/assets/scss/layout.scss | 1 + test/assets/views/AllTests.svelte | 5 ----- yarn.lock | 14 +++++++++++++- 8 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 src/assets/scss/_vars.scss create mode 100644 src/assets/scss/base.scss create mode 100644 src/assets/scss/layout.scss diff --git a/package.json b/package.json index c9f4962..5d46bd6 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index 64289ee..00e5326 100644 --- a/rollup.config.js +++ b/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, diff --git a/src/TestApp.ts b/src/TestApp.ts index b66a13b..b6d22ab 100644 --- a/src/TestApp.ts +++ b/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'), diff --git a/src/assets/scss/_vars.scss b/src/assets/scss/_vars.scss new file mode 100644 index 0000000..1f7f7af --- /dev/null +++ b/src/assets/scss/_vars.scss @@ -0,0 +1 @@ +$primary: #ff0080; diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss new file mode 100644 index 0000000..e2188e3 --- /dev/null +++ b/src/assets/scss/base.scss @@ -0,0 +1,9 @@ +@import "../../../node_modules/normalize.css/normalize"; + +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; +} diff --git a/src/assets/scss/layout.scss b/src/assets/scss/layout.scss new file mode 100644 index 0000000..f79093f --- /dev/null +++ b/src/assets/scss/layout.scss @@ -0,0 +1 @@ +@import "vars"; diff --git a/test/assets/views/AllTests.svelte b/test/assets/views/AllTests.svelte index caafcaf..b0e6001 100644 --- a/test/assets/views/AllTests.svelte +++ b/test/assets/views/AllTests.svelte @@ -4,11 +4,6 @@