Removing imported CSS on component end

Question

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?

Answer 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.