Closed imabot2 closed 1 year ago
We don't handle CSS variables, so you can use pure JS to get them
@alexander-akait When we use lazySingletonStyleTag
or lazyStyleTag
, the CSS is necessarily loaded in RAM until you apply the style with.use()
. As variables are part of CSS, you handle CSS variables in one way or another.
What I need is to access the CSS from the JavaScript even if the CSS is unused (i.e. not yet apply with .use()
).
If it is already possible, I didn't find how to do this in the docs.
Sorry, it is impossible using just style-loader, you can move your variables to JSON file then, for example use postcss or sass or less, to inject your CSS variable values into CSS and import this file where you need, sorry it is out of scope style-loader, we don't look at content of CSS files, we are working with your DOM
Feature Proposal
I would like to get the CSS variables or properties from CSS files even if there are unused.
Feature Use Case
I use this plugin to change pages theme dynamically. The user pick a theme and it is apply to the page thank to lazy loading (
use()
/unuse()
)It works fine, but I would like to display a preview of the theme before applying it. Is there a way to read the CSS variables or properties from JavaScript? Or, to apply the style inline to an element?
I already had a look at the object returned by:
import themeDark from './assets/themes/dark.css';
There are the two functionsuse()
/unuse()
and an object, maybe it is in the object?As we have
themeDark.use()
, is would be great to get athemeDark.getVariable ('main-color')
for example. If it is not possible right now, maybe a future feature?Please paste the results of
npx webpack-cli info
here, and mention other relevant information