React:带有Webpack的JSX中的内联CSS模块

Question

我有一个最小的React组件,它由两个文件组成:button.jsx和button.less.导入样式,并为类名添加哈希,以使组件的所有样式都是局部的.

这很好,但我想将所有组件代码放在一个文件中.是否可以在不丢失css模块性的情况下内联jsx文件中的样式？

现行守则

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(相关位)

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

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

我想写的是什么

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>;
    }
}

灵感来自vue.js和vue-loader.

我相信这是一个未解决的问题的重复: 使用css-loader内联Webpack + React

Answer 1

您可以为此使用回调加载程序。这实际上是一种解决方法，但确实有效。只需实现一个回调，它将提取您的 css 代码并将其替换为适当的导入。例如：

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 + '";';
        }
    }
    ...
};

按钮.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>;
    }
}