reactjs - React: Inline CSS modules in JSX with Webpack -

i have minimal react component consists of 2 files: button.jsx , button.less. styles imported , class names appended hash make styles local component.

this great, i'd have component code in 1 file. possible inline styles in jsx file without losing css modularity?

current code

button.jsx

import react 'react'; import styles './button.less'  export default class button extends react.component {     render() {         return <button classname={styles.primary}>{this.props.text}</button>;     } } 

button.less

@import '~semantic-ui/src/definitions/elements/button.less';  .common {     composes: ui button; }  .primary {     composes: common primary; } 

webpack.config.js (relevant bits)

module: {     loaders: [         {             test: /\.jsx$/,             loader: 'babel'         },          {             test: /\.less$/,             loader: "style!css?modules&importloaders=1!less"         }     ] }, 

what i'd write instead

button.jsx

<style lang="less" modules>     @import '~semantic-ui/src/definitions/elements/button.less';      .common {         composes: ui button;     }      .primary {         composes: common primary;     } </style>  import react 'react';  export default class button extends react.component {     render() {         return <button classname={styles.primary}>{this.props.text}</button>;     } } 

inspired vue.js , vue-loader.

i believe duplicate of unanswered question: using css-loader inline webpack + react

you can use callback-loader this. actualy workaround, trick. implement callback extract css-code , replace appropriate import. example:

webpack.config.js

var fs = require('fs'); var cssindex = 0; // not forget create , clean temporary folder "csstemp" before var webpackconfig = {     ...     resolve: {         alias: {             csstemp: path.resolve('./csstemp')         }     },     module: {         loaders: [             { test: /\.jsx$/, loader: "callback!babel" }         ]     },     callbackloader: {         csscallback: function(code) {             var filename = cssindex + '.less';             cssindex++;             // save css code callback argument             fs.writefilesync('./csstemp/' + filename, code);             // return import statement replace callback statement             return 'import styles "csstemp/' + filename + '";';         }     }     ... }; 

button.jsx

import react 'react'; csscallback(`     @import '~semantic-ui/src/definitions/elements/button.less';      .common {         composes: ui button;     }      .primary {         composes: common primary;     } `);  export default class button extends react.component {     render() {         return <button classname={styles.primary}>{this.props.text}</button>;     } }