question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not append styles to DOM in runtime (`insert` option)

See original GitHub issue

On Webpack 5, latest everything. See also: https://stackoverflow.com/questions/57269227/minicssextractplugin-doesnt-link-with-my-html-file#comment116303924_57269403

I ended up just crudely appending to each Webpack output with the form:

const appendToHead = (styles, hexDigest) => `
(function() {
  var STYLE_ID = "__STYLES_${hexDigest}";
  if (
    typeof window === 'undefined' ||
    STYLE_ID in window
  ) return;
  
  var styles = document.createElement('style');
  styles.innerHTML = "${
    styles.replace(/[\n\r]/g, '').replace(/"/g, '\"')
  }";
  
  document.head.append(styles);
  window[STYLE_ID] = true;
})();
`;

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ctjlewiscommented, May 6, 2021

I will try, but I do not have a lot of time either. This was the most I could do for the moment.

0reactions
alexander-akaitcommented, May 6, 2021

Feel free to ping me here or open a new issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styles are not applied immediately after a <style> tag is inserted
According to that - browser developers may execute styles in their order in DOM. Try to wait before adding your style tag:.
Read more >
CSS style not applying on dynamic injected html elements
I am using Angular 2.0.0-beta.12 & D3, i am injecting D3 barchart after viewInit, and inject css in component by adding attribute "styles", ......
Read more >
Dynamic style - manipulating CSS with JavaScript - W3C Wiki
In this article we will look at how to dynamically update the styling applied to your elements by manipulating your CSS at runtime...
Read more >
style-loader - webpack
Automatically injects styles into the DOM using multiple <style></style> . It is default behaviour. component.js import "./styles.css";. Example ...
Read more >
How to Add / Remove Options of a Selection Box Dynamically
First, create a new option. Second, add the option to the select element. There are multiple ways to create an option dynamically and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found