Svelte - unable to preprocess SCSS server side

Viewed 204

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,


0 Answers
Related