Funciona cuando configuro como a continuación. estoy usando django-webpack-loader
índice.html
{% load render_bundle from webpack_loader %} <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jayground</title> {% render_bundle 'main' 'css' %} </head> <body> <div id="react-app"></div> {% render_bundle 'main' 'js' %} </body> </html>Encabezado.js
import styles from './header.css'; export default class Header extends React.Component { render(){ <div className="header"> hello </div> } }webpack.config.js (Hice styles.css por separado y luego cargué el archivo css en html por separado para que className="header" funcione).
config.plugins = config.plugins.concat([ new ExtractTextPlugin('styles.css'), ]); config.module.rules.push( { test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) } )Según lo que entendí, el siguiente código también debería funcionar. Si no separo el archivo css usando ExtractTextWebpackPlugin, el archivo js del paquete tiene información css de esta manera.
exports.push([module.i, ".header {\r\n background-color: blue;\r\n}\r\n\r\n.extra {\r\n\tfont-size: 50;\r\n}", ""]);css debe cargarse correctamente.
Encabezado.js
import styles from './header.css'; export default class Header extends React.Component { render(){ <div className={styles.header}> hello </div> } }webpack.config.js
config.module.rules.push( { test: /\.css$/, use: ['style-loader', 'css-loader'] } )¿Echo de menos algo para que funcione correctamente?