[Proposal] Provide a query parameter to skip <style> elements

[LinusBorg]

Use case

It's often very hard to change the styles that authors of 3rd party components have applied to them.

Unless the author has used ExtractTextPlugin to extract the CSS from the bundle (or similar functionality in rollup etc.), Users have to import these styles and overwrite them - and if the author has used scoped styles, that becomes next to impossible. Even if the author did extract the CSS, this only works when using the pre-build version of that component, not when importing the .vue file from the packages /src

So my idea was to allow the use of vue-loader inline with a special query parameter that will skip the <style> tags during processing, so the module only exports the raw component without any styles.

Proposed syntax:

  import MyComponent from '!vue-loader?skip-css!./my-component.vue'

Then the user would be free to build his own component from it, and write his own CSS rules for the classes used by the component - without carrying the baggage of the old, overridden styles.

Full Example

my-restyled-component.vue

<script>
  import MyComponent from '!vue-loader?skip-css!./my-component.vue'
  export default MyComponent
</script>
<style>
  <!-- apply styles here -->
</style>

Thoughts?

[znck]

What about an additional component only export?

<script>
  import { $component as MyComponent } from './my-component.vue';
  
  export default MyComponent;
</script>

<style>
  <!-- apply styles here -->
</style>

[LinusBorg]

I'm no expert for webpack loaders, but wouldn't the generation of additional exports happen after the css was already parsed and handed off to css-loader and its cousins?

[znck]

I'm not sure if it is possible. Just what I would prefer!