{"id":19433,"library":"css-variables-loader","title":"css-variables-loader","description":"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.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Dashlane/css-variables-loader","tags":["javascript"],"install":[{"cmd":"npm install css-variables-loader","lang":"bash","label":"npm"},{"cmd":"yarn add css-variables-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-variables-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency because the loader only works within a Webpack build pipeline.","package":"webpack","optional":false}],"imports":[{"note":"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.","wrong":"const variables = require('css-variables-loader!./variables.css');","symbol":"default","correct":"import variables from 'css-variables-loader!./variables.css';"},{"note":"The correct loader name is 'css-variables-loader', not 'css-variables'. The '!' prefix is optional but correct.","wrong":"require('!css-variables!./variables.css')","symbol":"default","correct":"require('css-variables-loader!./variables.css')"},{"note":"The loader does not support named exports; you must import the entire module as an object.","wrong":"import { '--my-theme-color' } from 'css-variables-loader!./variables.css';","symbol":"named exports","correct":"import * as variables from 'css-variables-loader!./variables.css';"}],"quickstart":{"code":"// Install: npm install --save-dev css-variables-loader\n// In your JavaScript file:\nimport variables from 'css-variables-loader!./variables.css';\nconsole.log(variables);\n// Output: { '--my-theme-color': 'hsl(121, 90%, 90%)', '--my-accent-color': 'hsl(60, 90%, 90%)', '--my-font-size': '18px' }","lang":"javascript","description":"Demonstrates importing a CSS file with css-variables-loader and logging the extracted variables object."},"warnings":[{"fix":"Ensure all desired CSS custom properties are declared under `:root { ... }`. Variables in other selectors or @media blocks are ignored.","message":"Only variables defined on the `:root` selector are extracted.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use an alternative solution such as `postcss-custom-properties` with Rollup or a similar bundler-specific plugin.","message":"This loader is Webpack-specific and cannot be used in other bundlers like Rollup or Parcel.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Parse numeric values manually if needed: `parseInt(variables['--my-font-size'], 10)` or use a helper library.","message":"The loader outputs string values; numeric or unit values like `18px` remain strings.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add the loader prefix: `import variables from 'css-variables-loader!./variables.css';`","cause":"Attempting to import a CSS file without the loader in the import path.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run `npm install --save-dev css-variables-loader`","cause":"The loader is not installed or not listed in devDependencies.","error":"Cannot find module 'css-variables-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}