You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you have a .css file that you want to use in your web components and on the main document, it currently doesn't work out of the box. So here's how Rend can help do it.
Say you have a css file at /css/typography.css and you're using it in your app with <link rel="stylesheet" href="/css/typography.css">.
Now you also want to use those styles in your web component, but you can't (well you can if you don't mind bad performance, but let's assume you don't). To make this work, let's first convert the CSS file to a JS file called /CSS/typography.css.js and just enclose the CSS in a function like this:
exportconsttypography=` .display-large { font-size: 100px; } /* And all the other styles */`}
Now on your server app, just add two simple endpoints:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
If you have a
.css
file that you want to use in your web components and on the main document, it currently doesn't work out of the box. So here's how Rend can help do it.Say you have a css file at
/css/typography.css
and you're using it in your app with<link rel="stylesheet" href="/css/typography.css">
.Now you also want to use those styles in your web component, but you can't (well you can if you don't mind bad performance, but let's assume you don't). To make this work, let's first convert the CSS file to a JS file called
/CSS/typography.css.js
and just enclose the CSS in a function like this:Now on your server app, just add two simple endpoints:
Then your document
<link>
stays the same, no change required there. And in your components, you import like this:Feedback welcome on how we can make this even simpler.
Beta Was this translation helpful? Give feedback.
All reactions