Registry / web-framework / css-variables-loader

css-variables-loader

library2.0.2jsnpmunverified

A Webpack loader that extracts CSS custom properties (variables) from CSS files and makes them available as a JavaScript object map. Version 2.0.2 is the latest stable release. It only supports variables defined on the `:root` selector and requires a Webpack-based build setup. Unlike CSS-modules or other approaches, this loader provides a simple key-value export of CSS variable names to their string values, facilitating dynamic theme or configuration use.

web-framework

npm install css-variables-loader

github ↗package ↗

INSTALL

IMPORT

SIG · CSS-VARIABLES-LOAD

css-variables-loader

web-frameworkjavascriptv2.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import variables from 'css-variables-loader!./variables.css';

✗ const variables = require('css-variables-loader!./variables.css');

The loader is typically used inline in imports. The module exports a default object map. Both import and require work, but import is preferred for modern JS.

default

✓ require('css-variables-loader!./variables.css')

✗ require('!css-variables!./variables.css')

The correct loader name is 'css-variables-loader', not 'css-variables'. The '!' prefix is optional but correct.

named exports

✓ import * as variables from 'css-variables-loader!./variables.css';

✗ import { '--my-theme-color' } from 'css-variables-loader!./variables.css';

The loader does not support named exports; you must import the entire module as an object.

Demonstrates importing a CSS file with css-variables-loader and logging the extracted variables object.

// Install: npm install --save-dev css-variables-loader // In your JavaScript file: import variables from 'css-variables-loader!./variables.css'; console.log(variables); // Output: { '--my-theme-color': 'hsl(121, 90%, 90%)', '--my-accent-color': 'hsl(60, 90%, 90%)', '--my-font-size': '18px' }

Debug

Known issues

gotchaOnly variables defined on the `:root` selector are extracted.

fix

Ensure all desired CSS custom properties are declared under `:root { ... }`. Variables in other selectors or @media blocks are ignored.

affects: >=1.0.0

gotchaThis loader is Webpack-specific and cannot be used in other bundlers like Rollup or Parcel.

fix

Use an alternative solution such as `postcss-custom-properties` with Rollup or a similar bundler-specific plugin.

affects: >=1.0.0

gotchaThe loader outputs string values; numeric or unit values like `18px` remain strings.

fix

Parse numeric values manually if needed: `parseInt(variables['--my-font-size'], 10)` or use a helper library.

affects: >=1.0.0

Errors

Common errors & fixes

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Attempting to import a CSS file without the loader in the import path.

fix

Add the loader prefix: `import variables from 'css-variables-loader!./variables.css';`

Cannot find module 'css-variables-loader'

The loader is not installed or not listed in devDependencies.

fix

Run `npm install --save-dev css-variables-loader`

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

webpackrequiredRequired as a peer dependency because the loader only works within a Webpack build pipeline.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Dashlane/css-variables-loader ↗

packagehttps://www.npmjs.com/package/css-variables-loader ↗