React + Reactstrap + CSS模块+ Webpack

Question

我一直在寻找如何将以下模块组合在一起: ReactJS + ReactStrap和css模块(ReactJS-css-ReactStrap和/或boostrap CSS-Modules )，但是，我似乎无法将这三个模块组合在一起以达到预期的效果(或者在网上找到任何帮助)。

这背后的想法是让ReactStrap元素可用，即：

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

但也允许我使用CSS-Modules来实现类似如下的最终结果：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './mybutton.css';

class Test extends React.Component {
    render () {
        return <Button color='danger' styleName='myButton'>Danger</div>;
    }
}

export default CSSModules(Table, styles);

其中mybutton.css可能是这样的：

.myButton {
  composes: btnPrimary from "bootstrap-css-modules/css/buttons.css";
  background-color: dodgerblue;
  border-color: dodgerblue;
}

我也在使用Webpack，所以我甚至不知道从哪里开始和Webpack一起使用它。

编辑：

我使用它的方法如下：

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

npm install --save bootstrap-css-modules

这是我的webpack配置

const webpack = require('webpack');

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');

const ROOT_PATH = path.resolve(__dirname);

module.exports = {
    devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
    entry: [
        path.resolve(ROOT_PATH, 'app/src/index'),
    ],
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.jsx?$/,
                loader: process.env.NODE_ENV === 'production' ? [] : ['eslint-loader'],
                include: path.resolve(ROOT_PATH, 'app'),
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react'],
                },
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
            }],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    output: {
        path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
        publicPath: '/',
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: path.resolve(ROOT_PATH, 'app/dist'),
        historyApiFallback: true,
        hot: true,
        inline: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlwebpackPlugin({
            title: 'testapp',
        }),
    ],
};

谢谢

Answer 1

@tehOwner ...phew这个问题很有趣。我想我已经完成了你想做的事。

我创建了一个可以在here中找到的沙箱。

DEMO

基本上，您需要项目中的CSS模块能够使用className属性将多个this类分配给一个react组件。

并使用类似于下面的结构设置您的组件

import React, { Component } from 'react';
import { Button } from 'reactstrap';
import CSSModules from 'react-css-modules';
import styles from './MyDangerButton.css';
import cn from 'classnames';

class MyDangerButton extends Component {
  render() {
    const myFancyDangerButton = cn({
      btn: true,
      'btn-danger': true,
      MyDangerButton: true
    });

    return (
      <div>
        <h1>My Fancy Danger Button!</h1>
        <Button className={myFancyDangerButton}>Danger Button</Button>
      </div>
    );
  }
}

export default CSSModules(MyDangerButton, styles);

干杯克里斯

Answer 2

最新的解决方案是使用以下命令升级react-script：

 npm upgrade --latest react-scripts

它支持CSS模块，所以你不需要配置任何东西。需要做的是将.module添加到CSS文件中:从'./mybutton.css‘到'./mybutton.module.css’。并同时更改导入：

import styles from './mybutton.module.css';

使用它，我们不需要执行

npm run eject 

再来一次。