Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

External sass file(bootstrap) #11

Open
dephiros opened this issue Sep 8, 2020 · 5 comments
Open

External sass file(bootstrap) #11

dephiros opened this issue Sep 8, 2020 · 5 comments

Comments

@dephiros
Copy link

dephiros commented Sep 8, 2020

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
Copy link
Contributor

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

@dephiros
Copy link
Author

dephiros commented Sep 8, 2020

@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
Copy link
Contributor

@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
Copy link
Author

dephiros commented Sep 8, 2020

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

@nickreese
Copy link
Contributor

nickreese commented Sep 8, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants