React + Reactstrap + CSS 模块 + Webpack

Posted 2023-03-23

【中文标题】React + Reactstrap + CSS 模块 + Webpack

【英文标题】：React + Reactstrap + CSS Modules + Webpack

【发布时间】：2018-01-06 07:22:09

【问题描述】：

我一直在寻找如何组合以下内容：ReactJS + ReactStrap 和 CSS-Modules（react-css-modules 和/或 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',
        ),
    ],
;

谢谢

【问题讨论】：

我测试了代码，它对我有用，你能告诉你css-loader的webpack配置吗？

我使用类似的设置 webpack、react-css-modules、css-modules、react-toolbox，因此我认为我可以在这里提供帮助，因为可能我必须解决相同的问题。请描述你的主要问题是什么，如果可能的话，分享你的 webpack 配置。

我遇到了这里解释的确切问题：***.com/questions/47520696/…@hinok 如果可能的话，你能看看我的吗？谢谢！

【参考方案1】：

@tehOwner ...phew 这个问题真是太棒了。我想我完成了你想做的事情。

我创建了一个沙盒，可以在here找到。

DEMO

基本上，您需要在项目中使用this npm 模块才能使用className 属性将多个CSS 类分配给一个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);

? 干杯 克里斯

【参考方案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 

还有。