No dynamic binding of CSS files possible on build

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]

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]

@n4n0GH Awesome.

Thanks for using.