我一直在寻找如何组合以下内容: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 模块,最终结果类似于:
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',
}),
],
};
谢谢
最佳答案
@tehOwner ...唷,这个问题太奇怪了。我想我完成了您想要做的事情。
我创建了一个沙箱,可以找到here .
基本上,你需要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);
🍺欢呼 克里斯
关于reactjs - React + Reactstrap + CSS 模块 + Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45403710/