search

Elderjs / template

Elder.js template project. It is part template, part tutorial. Dive in!
https://elderjs.pages.dev/
MIT License
113 stars 33 forks source link

External sass file(bootstrap) #11

Open dephiros opened 4 years ago

dephiros commented 4 years ago

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 commented 4 years ago

@dephiros Did you configure the preprocessor in your svelte.config.js? I think that is required.

dephiros commented 4 years ago

@nickreese , yeah I did and the import does work for me.(the style does apply to the page The problem for me is the style ended up in the html header instead of a separate file which is better for caching

nickreese commented 4 years ago

@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.

dephiros commented 4 years ago

@nickreese , I am not very familiar with rollup. Would you be able to provide a general direction in how to change this behavior?

nickreese commented 4 years ago

@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.