Rollup-plugin-vue: Inject CSS dynamically
Expected behavior
I would like to have the css styles injected inside '' 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?
rayrutjes
All 7 comments
I sorry this is not supported ATM.
znck
on 8 Mar 2017
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.
rayrutjes
on 8 Mar 2017
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>
znck
on 8 Mar 2017
@rayrutjes I have the same question. Have you solve it?
limichange
on 10 Mar 2017
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.
rayrutjes
on 10 Mar 2017
How can I use it? There is nothing about on docs!
alexbruno
on 8 May 2017
Set css: true to dynamically inject as
Most helpful comment
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 androllup-plugin-vueinjects code in<script>