postcss-variables-loader
Allows you to share variables between CSS and JS with Webpack and HMR.
This loader transforms special CSS files to JS modules.
- Shared variables between CSS and JS
- HMR friendly, CSS changes are applied on the fly.
To be more JS friendly loader will:
- strip
px
part from CSS px numbers - convert dashes-case to camelCase
- check for runtime config mutations and access of missing keys (only in dev or es6 mode)
Usage
/* variables.config.css */ @))
/* component.css */ ;);} { /* styles for small viewport */}
// component.js; console;/* variables = { primaryColor: 'blue'; gutter: 30; smallDevice: '(max-width: 480px)' }*/ componentstylecolor = variablesprimaryColor; { return 5 + variablesgutter;}
Install
yarn add --dev postcss-variables-loader
npm install --save-dev postcss-variables-loader
NB: You need to process CSS somehow (eg postcss) and imports inside css (eg via postcss-import)
Recommended webpack configuration:
webpack.config.js
with babel-loader
rules: [
{
test: /\.config.css$/,
loader: 'babel-loader!postcss-variables-loader'
},
// dont forget to exclude *.config.css from other css loaders
{
test: /\.css$/,
exclude: /\.config.css$/,
loader: 'css-loader!postcss-loader'
}
]
Options
if production.env.NODE_ENV === 'development'
it will try to wrap config inside Proxy
in runtime.
It is used to guard from accidental mutations or accessing missing keys.
If you dont want this behaviour: pass es5=1
:
loader: 'postcss-variables-loader?es5=1'