I am currenty trying to build a Headless CMS.
The frontend uses server side rendering.
In my server.js I want to preprocess SCSS for all files starting from my entry file App.svelte.
Does Svelte.preprocess work on Component.render()? Does anyone has an idea?
server.js
..
// this registers .svelte files
require('svelte/register');
const App = require('./App.svelte').default;
{html, css, head} = App.render({
pageData
});
reply.view('index', {
pageData: JSON.stringify(pageData),
STATIC_DIR,
html,
// css should output preprocessed CSS
css: css.code,
head
})
./App.svelte
..
<script>
import Navigation from "./components/Navigation.svelte"
import Page from "./components/Page.svelte"
import Header from "./components/Header.svelte"
import Main from "./components/Main.svelte"
import Footer from "./components/Footer.svelte"
import Spinner from "./components/Spinner.svelte"
export let pageData;
console.log(pageData)
</script>
<Spinner></Spinner>
<h1>Das ist ein <span>Test</span></h1>
<Header>
<Navigation data="{pageData['navigation/main']}"/>
</Header>
<Main>
<Page pageData="{pageData['page']}" />
</Main>
<Footer>
<Navigation data="{pageData['navigation/footer']}"/>
</Footer>
<style lang="scss">
h1{
color: red;
span{color: yellow}
}
</style>
getting the following error:
CompileError [ParseError]: Colon is expected
at error$1 (justpm.de/node_modules/svelte/compiler.js:15501:20)
at Parser$1.error (justpm.de/node_modules/svelte/compiler.js:15600:10)
at Object.read_style [as read] (justpm.de/node_modules/svelte/compiler.js:11864:21)
at tag (justpm.de/node_modules/svelte/compiler.js:14586:34)
at new Parser$1 (justpm.de/node_modules/svelte/compiler.js:15559:22)
at parse$3 (justpm.de/node_modules/svelte/compiler.js:15729:21)
at compile (justpm.de/node_modules/svelte/compiler.js:26607:18)
at Object.require.extensions.<computed> [as .svelte] (justpm.de/node_modules/svelte/register.js:39:28)
at Module.load (internal/modules/cjs/loader.js:983:32)
at Function.Module._load (internal/modules/cjs/loader.js:891:14) {
name: 'ParseError',
code: 'css-syntax-error',
start: { line: 32, column: 12, character: 723 },
end: { line: 32, column: 12, character: 723 },
pos: 723,