search

ktquez / vue-head

Manager the meta information of the head tag, a simple and easy way
MIT License
984 stars 73 forks source link

No dynamic binding of CSS files possible on build #82

Closed n4n0GH closed 4 years ago

n4n0GH commented 5 years ago

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: {
  link(){
    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.

n4n0GH commented 5 years ago

One thing I noticed: the injection in the <head> part is listed as <link rel="stylesheet" href="[object Object]"> which I'm pretty sure is not what it should look like. I'll continue testing.

n4n0GH commented 5 years ago

So during npm run serve the requested CSS is being pushed as an inline-style, after npm run build this doesn't happen anymore. (And I'm sorry but I'm going to spam this comment section until I figured out why this doesn't work the way it should)

n4n0GH commented 5 years ago

Issue most likely caused by webpack's bundling mechanic. I'm guessing vue-head can't find the file anymore since it got combined into a file it's not looking at. Testing testing testing :eyes:

ktquez commented 5 years ago

I'm sorry for the delay in replying. Can you play an example online or repository?

n4n0GH commented 5 years ago

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 :)

ktquez commented 5 years ago

@n4n0GH Awesome.

Thanks for using.