11

我有一个最小的 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>;
    }
}

无按钮

@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的启发。

我相信这是这个未回答问题的重复： Using css-loader inline with Webpack + React

4

2 回答 2

3

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

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

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

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

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

于 2016-03-29T10:32:19.237 回答
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>;
    }
}
于 2016-01-18T11:41:26.353 回答