External sass file(bootstrap)

I am trying to port one of my sapper app over and run into a bit of a problem with external sass file

In my sapper project, I add

  :global {
    @import '../style/global.scss';
  }

to the layout component. I tried to do the same thing in this template and it works. However, the style is inline inside the html instead of extracted to a separate file like sapper.

Is there a way to achieve the same behavior with this template.

Thank you

[nickreese]

@dephiros Currently there are 2 rollup configs generated during dev mode and 2 during production. They differ quiet a bit.

— edit: But, the nice thing is that they are encapsulated in the createSSRConfig function in the rollup.config.js.

You should be able to adapt this pretty easily for production, but the bundling during development is quiet different.

— /edit

I’d find a template where someone was doing what you’re looking to do with the generic svelte rollup then:

1. Figure out how they’re getting their css written to a file.
2. Merge that pattern in on the server versions of the Elder.js rollup file.
3. Include that written CSS into your public folder
4. Include that css in your template.

I’d agree that this should be configurable, but it hasn’t made it on our priority list for ElderGuide.com so I haven’t built it yet.

[nickreese]

@dephiros I completely misread your first comment. Yep, that is how it is configured. CSS from within Svelte components are written to the head of the page. This could be something we can rework in the future if someone wanted to spearhead it.