css-js-loader
Write your styles with in JavsScript.
Usage
Install:
npm install css-js-loader value-loader
Add to your webpack.config.js
:
moduleexports = ... module: loaders: test: /\.css?$/ loaders: 'style-loader' 'css-loader' test: /\.css\.js$/ loaders: 'css-js-loader' 'value-loader' ;
NOTE: You don't need to chain with value-loader per-se, but doing so gives you caching, nested dependency monitoring/reloading and the ability to use webpack's tree-shaking abilities.
Writing JS Styles
css-js-loader
converts JS modules to CSS markup at runtime.
A .css.js
file:
'.blueText': color: 'blue' fontSize: 12 ;
Yields:
CSS classes can be defined as ES6 named exports.
const blueText = ... ; const greenText = ... ; '.redText': ... ;
Is equivalent to:
'.blueText': ... '.greenText': ... '.redText' ... ;
CSS Modules
css-js-loader
works great with CSS Modules. Named class exports map directly to the class names that are imported in your component files.
Style file:
const base = ... ;const inner = ... ;
Component file:
;; <div className=base> <div className=inner> ... </div> </div>;