react - Reaccionar: módulos CSS en línea en JSX con Webpack

jsx style

Question

Tengo un componente React mínimo que consta de dos archivos: button.jsx y button.less . Los estilos se importan y los nombres de clase se anexan con un hash para hacer que todos los estilos sean locales para el componente.

Esto es genial, pero me gustaría tener todos los códigos de componentes en un solo archivo. ¿Es posible alinear los estilos en el archivo jsx sin perder la modularidad de css?

Código actual

button.jsx

import React from ''react'';
import styles from ''./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 (bits relevantes)

module: {
    loaders: [
        {
            test: //.jsx$/,
            loader: ''babel''
        },

        {
            test: //.less$/,
            loader: "style!css?modules&importLoaders=1!less"
        }
    ]
},

Lo que me gustaría escribir en cambio

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 from ''react'';

export default class Button extends React.Component {
    render() {
        return <button className={styles.primary}>{this.props.text}</button>;
    }
}

Inspirado por vue.js y vue-loader .

Creo que este es un duplicado de esta pregunta sin respuesta: Usar css-loader en línea con Webpack + React

Answer 1

Puede usar callback-loader para esto. Esto es realmente una solución, pero funciona. Simplemente implemente una devolución de llamada que extraerá su código CSS y lo reemplazará con la importación adecuada. Por ejemplo:

webpack.config.js

var fs = require(''fs'');
var cssIndex = 0;
// Do not forget to create and 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 the css code from the callback argument
            fs.writeFileSync(''./cssTemp/'' + filename, code);
            // Return the import statement which will replace the callback statement
            return ''import styles from "cssTemp/'' + filename + ''";'';
        }
    }
    ...
};

button.jsx

import React from ''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>;
    }
}

Answer 2

Escribí un cargador de Webpack para este propósito:

https://github.com/chrisdavies/stylextract-loader

Le permite escribir una sola etiqueta de estilo por archivo JSX y admite módulos CSS de paquete web, también, si lo desea.

En tiempo de compilación, extrae las reglas de su etiqueta de estilo y las mueve a un archivo CSS externo.

Debo señalar que, como simplemente extrae tus reglas en un archivo CSS externo, funciona bien con SASS, autoprefixer, etc.