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
  • 515
  • 6
  • 22

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,191
  • 7
  • 18
  • 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