React:JSX 中的内联 CSS 模块与 Webpack

Question

我有一个最小的 React 组件，它由两个文件组成：button.jsx 和 button.less 。导入样式，并在类名后附加哈希，以使所有样式都位于组件的本地。

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

当前代码

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

按钮.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"
        }
    ]
},

我想写什么

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

我为此编写了一个 Webpack 加载器：

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

它允许你为每个JSX文件编写一个样式标签，如果你愿意，它也支持webpack CSS模块。

在构建时，它会从样式标记中提取规则，并将它们移出到外部 CSS 文件中。

我应该注意，因为它只是将您的规则提取到外部 CSS 文件中，所以它可以与 SAS、自动前缀等配合得很好

Answer 2

你可以为此使用回调加载器。这实际上是一种解决方法，但它确实可以解决问题。只需实现一个回调，它将提取您的 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>;
    }
}