Inject CSS dynamically

[rayrutjes]

Expected behavior

I would like to have the css styles injected inside '<style/>' tags like explained here: https://vuejs.org/v2/guide/deployment.html#Pre-Compiling-Templates

I have 1 or 2 CSS rules per component, so I don't want to extract them to a separate file.

Actual behavior

By default, it extracts it at the root of my project in a file called 'bundle.css'

Is there a way to disable CSS extraction?

[znck]

I sorry this is not supported ATM.

[rayrutjes]

Any guidance on how this could be achieved easily with this plugin? I could really use this ;)
If you pinpoint me to some locations, and ideas, I would gladly see how I could contribute on this.

[znck]

https://github.com/vuejs/rollup-plugin-vue/blob/master/src/style/index.js#L24-L63 - This part handles style extraction.

But I think it would be better to inject a function that would add a style tag, it should be done like this (https://github.com/vuejs/rollup-plugin-vue/blob/master/src/vueTransform.js#L189-L193).

---

Also, you can have a look at vue-loader's code both are almost similar only difference is vue-loader generates code and rollup-plugin-vue injects code in <script>

[limichange]

@rayrutjes I have the same question. Have you solve it?

[rayrutjes]

Wow, @znck nailed it in no time ;)
This is awesome because rollup is ideal for shipping re-usable components that exposes es2015 modules. Not easily achievable with webpack.

[alexbruno]

How can I use it? There is nothing about on docs!

[znck]

Set css: true to dynamically inject as <style> tags via JavaScript.

http://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=style