Mixing
How can I load a stylesheet dynamically in an Ember route?
0
I'd like to breakup my stylesheet and import smaller chunks on route load.
With the code below I'm able to successfully create the <link> element with the correct attributes. Once the DOM is loaded is appears in the <head> just as I would have expected it as if I loaded in index.html. However, the styles don't load.
beforeModel() {
let link = document.createElement('link');
const rootURL = this.get('router.rootURL');
link.rel = "stylesheet";
link.type = "css";
link.href = `${rootURL}assets/muh_sheet.css">`;
document.head.appendChild(link);
}
It shows up in the <head> tag with the correct src, no console errors. Still doesn't load the styles.
javascript css ember.js stylesheet
asked Jan 2 at 22:27
lookininwardlookininward
16712
|
show 3 more comments
0
I'd like to breakup my stylesheet and import smaller chunks on route load.
With the code below I'm able to successfully create the <link> element with the correct attributes. Once the DOM is loaded is appears in the <head> just as I would have expected it as if I loaded in index.html. However, the styles don't load.
beforeModel() {
let link = document.createElement('link');
const rootURL = this.get('router.rootURL');
link.rel = "stylesheet";
link.type = "css";
link.href = `${rootURL}assets/muh_sheet.css">`;
document.head.appendChild(link);
}
It shows up in the <head> tag with the correct src, no console errors. Still doesn't load the styles.
javascript css ember.js stylesheet
asked Jan 2 at 22:27
lookininwardlookininward
16712
1
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
1
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
1
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
1
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47
|
show 3 more comments
0
0
0
I'd like to breakup my stylesheet and import smaller chunks on route load.
With the code below I'm able to successfully create the <link> element with the correct attributes. Once the DOM is loaded is appears in the <head> just as I would have expected it as if I loaded in index.html. However, the styles don't load.
beforeModel() {
let link = document.createElement('link');
const rootURL = this.get('router.rootURL');
link.rel = "stylesheet";
link.type = "css";
link.href = `${rootURL}assets/muh_sheet.css">`;
document.head.appendChild(link);
}
It shows up in the <head> tag with the correct src, no console errors. Still doesn't load the styles.
javascript css ember.js stylesheet
asked Jan 2 at 22:27
lookininwardlookininward
16712
I'd like to breakup my stylesheet and import smaller chunks on route load.
With the code below I'm able to successfully create the <link> element with the correct attributes. Once the DOM is loaded is appears in the <head> just as I would have expected it as if I loaded in index.html. However, the styles don't load.
beforeModel() {
let link = document.createElement('link');
const rootURL = this.get('router.rootURL');
link.rel = "stylesheet";
link.type = "css";
link.href = `${rootURL}assets/muh_sheet.css">`;
document.head.appendChild(link);
}
It shows up in the <head> tag with the correct src, no console errors. Still doesn't load the styles.
javascript css ember.js stylesheet
javascript css ember.js stylesheet
asked Jan 2 at 22:27
lookininwardlookininward
16712
asked Jan 2 at 22:27
lookininwardlookininward
16712
asked Jan 2 at 22:27
lookininwardlookininward
16712
asked Jan 2 at 22:27
lookininwardlookininward
16712
asked Jan 2 at 22:27
lookininwardlookininward
16712
16712
1
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
1
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
1
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
1
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47
|
show 3 more comments
1
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
1
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
1
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
1
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47
1
1
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
1
1
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
1
1
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
1
1
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013985%2fhow-can-i-load-a-stylesheet-dynamically-in-an-ember-route%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54013985%2fhow-can-i-load-a-stylesheet-dynamically-in-an-ember-route%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
This is a bad idea. What happens when your stylesheet is slow to load or the js is deffered? I'd imagine any benfits would be marginal at best and the cons will far out weigh the pros. Just load it all in the head.
– Liam
Jan 3 at 11:05
Is there no effective strategy for this? I'm trying to get a quick first paint and low Time to Interactive scores on the Lighthouse Audits.
– lookininward
Jan 3 at 13:56
1
This may impress some arbitrary audit but it will make your actual users experience worse, which would you prefer? If you want to improve page load speed I would pretty much guarantee there is a better option to optimise.
– Liam
Jan 3 at 14:04
1
Are you using established technologies like server-side rendering with fastboot already? That should make a real difference for time to first meaningful paint.
– jelhan
Jan 4 at 9:34
1
I would suggest using a CDN and cache your CSS for faster load times. web.dev/fast this link would also help you know if anything is missing
– Neovire
Jan 7 at 19:47