0

I have many components that import hosted css files as follows: 

<style scoped>
  @import 'https://test.com/path/to/my-stylesheets/styles.css';
</style>

What I am wanting is a way to remove these imported stylesheets on an end lifecycle hook such as beforeDestroy.

Is this possible?

Sisky
  • 563
  • 9
  • 26

1 Answers1

1

What you're trying to do depends on vue-loader (if you're using webpack) and it looks like a counter intuitive. So, there's no reason for styles to be removed from document. What you can do is to define your CSS classes in stylesheets or as a data variable in viewmodel and assign/remove those classes during Vue component's lifecycle like beforeCreate/beforeDestroy etc. if you like.

Nafiul Islam
  • 1,220
  • 8
  • 20
  • Yeah I realise it seems counter intuitive. We are working with some legacy system integrations and long story short we need these sheets removed completely on destroy. – Sisky May 03 '18 at 04:20
  • 1
    Well! I don't like to say this, you'll need to go super ugly. You'll need something like the link shared on `beforeDestroy` I think. But this pattern shouldn't be followed. Though it's just an idea https://stackoverflow.com/questions/5033650/how-to-dynamically-remove-a-stylesheet-from-the-current-page – Nafiul Islam May 03 '18 at 04:32