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.

No dynamic binding of CSS files possible on build

See original GitHub issue

I am using vue-head to enable users to freely switch themes, and even write their own themes in a provided textarea. vue-head is getting the neccessary CSS for injection like so:

head: {
    if(this.getTheme != 'Custom'){
      return [
          rel: 'stylesheet',
          name: 'theme', 
          href: require('./assets/css/'+this.theme)

this.theme being a vuex state that stores the name of the theme.

During npm run serve it works like expected, however when doing npm run build and deploying this to a webserver, it breaks functionality and won’t switch to new files at all. This was also tested with require(`@/assets/css/${this.theme}`) which provides the same results.

I’m using an unmodified vue-cli setup with webpack as the build tool.

Issue Analytics

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

github_iconTop GitHub Comments

n4n0GHcommented, Oct 9, 2019

Ah sorry, I think I found the reason this is happening; Like I said before, webpack finds all seperate theme files (the CSS I’m trying to inject dynamically) and combines them into one file. Now in my case all CSS selectors are called the same which means that my frontend can’t differentiate between the individual styles anymore. I need to try and force webpack to not bundle those files, it should work fine then. I’ll get back at you some time soon when I did that. Should be either this or next week. Good plugin so far tho 😃

ktquezcommented, Oct 9, 2019

@n4n0GH Awesome.

Thanks for using.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Make Your CSS Dynamic with CSS Custom Properties - Toptal
Explore CSS custom properties and find out how they can be used to make better, more dynamic stylesheets.
Read more >
CSS style not applying on dynamic injected html elements
Another workaround for smaller projects seems to be binding the css files inside of the angular-cli. The disadvantage is that they are loaded ......
Read more >
Dynamically Created HTML object not having CSS applied to it
Try writing a jQuery function to apply the CSS styles once the for loop is done executing. Something like this:
Read more >
How to load CSS and JS files dynamically ? - GeeksforGeeks
Step 1: Create an index.html file and app.js file. This would be our HTML file through which we will demonstrate dynamically loading of...
Read more >
Build Truly Dynamic Theme with CSS Variables - Medium
Bind the two variables to the template through ngStyle. Big problem of this solution — Scss files not have access to color variables, ......
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 Post

No results found

github_iconTop Related Hashnode Post

No results found