React + Reactstrap + CSS-модули + Webpack

Я искал, как я могу комбинировать следующее: ReactJS + ReactStrap и CSS-модули (реагировать-css-модули и/или boostrap-css-модули), однако я не могу собрать три модуля вместе для достижения желаемый эффект (или найти любую помощь в Интернете).

Идея этого состоит в том, чтобы иметь доступные элементы ReactStrap, т.е.:

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

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

но также позвольте мне использовать CSS-модули, чтобы конечный результат был похож на:

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 [email protected]

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

npm install --save bootstrap-css-modules

Вот мой конфиг вебпака

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',
        }),
    ],
};

Спасибо


webpack reactjs react-css-modules bootstrap-4 reactstrap
person teh0wner    schedule 30.07.2017    source источник
comment
Я протестировал код, у меня он работает, не могли бы вы показать конфигурацию веб-пакета css-loader?   -  person Nagaraj Tantri    schedule 02.08.2017
comment
Я использую аналогичные настройки webpack, react-css-modules, css-modules, react-toolbox, поэтому я думаю, что могу помочь здесь, потому что, вероятно, мне приходилось решать те же проблемы. Пожалуйста, опишите, в чем ваша основная проблема, и поделитесь конфигурацией веб-пакета, если это возможно.   -  person Dawid Karabin    schedule 03.08.2017
comment
У меня возникла точная проблема, как описано здесь: stackoverflow.com/questions/47520696/ @hinok Не могли бы вы взглянуть на мой, если это возможно? Благодарю вас!   -  person Kevin Ghaboosi    schedule 28.11.2017

Ответы (2)


arrow_upward
5
arrow_downward

@tehOwner ... уф, этот вопрос был глупым. Думаю, я добился того, что вы пытались сделать.

Я создал песочницу, которую можно найти здесь.

ДЕМО

По сути, вам нужен этот модуль npm в вашем проекте, чтобы иметь возможность назначать несколько классов CSS для компонент реакции, использующий свойство className.

И настройте свой компонент со структурой, похожей на приведенную ниже.

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

???? ура Крис

person ipatch    schedule 10.12.2017

arrow_upward
1
arrow_downward

Новейшее решение — обновить реагирующий скрипт, используя:

 npm upgrade --latest react-scripts

Он поддерживает модуль CSS, поэтому вам не нужно ничего настраивать. Что нужно сделать, так это добавить .module в файл CSS: от './mybutton.css' до './mybutton.module.css'. И также измените импорт:

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

Используя это, нам не нужно выполнять

npm run eject

больше.

person Tony Bui    schedule 15.12.2018