How to add <style> tag in Vue.js component

Question

I'm on Vue.js v2. I have a CSS stylesheet stored as a string in a variable.

import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';

I need to create a tag from my component.

<style v-html="sitePackCss" />

OR

<style>{sitePackCss}</style>

When I do either of these, I get the following error in the console:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

How do I get this tag onto the page?

NOTE: I know this is a hacky, non-preferred way to include styles. This solution will only get used in the context of storybook, where I need to include specific CSS files for specific stories (without storybook/webpack adding them to every story). If I use normal webpack loaders, each tag is added to every story. Importing the styles as a string is the only way I've found to sidestep that behavior.

What about import '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; inside the main.js file? — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 26, 2022 at 19:09
@BoussadjraBrahim The whole point of this hack is to not include the css globally to every story and what you suggested would definitely do that. — emersonthis
– emersonthis, Commented Sep 26, 2022 at 19:13

Boussadjra Brahim · Accepted Answer · 2022-09-26 19:45:09Z

2

Try to add the style to the src tag of the style in your SFC :

<style lang="sass" src="../../app/javascript/styles/site.sass">

</style>

answered Sep 26, 2022 at 19:45

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emersonthis · Accepted Answer · 2022-09-26 19:54:53Z

-2

This seems to work!

import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass';

In template:

<component is="style" type="text/css">${sitePackCss}</component>

Note: the sass files have references to fonts that were not working correctly using this technique. I had to update the staticDirs config to make those paths work. https://storybook.js.org/docs/react/configure/images-and-assets

edited Sep 26, 2022 at 19:54

answered Sep 26, 2022 at 19:14

emersonthis

33.6k62 gold badges224 silver badges385 bronze badges

Collectives™ on Stack Overflow

How to add <style> tag in Vue.js component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related