Question

我已经在我的React Componnet中导入了这样的Bootstrap样式

import 'bootstrap/dist/css/bootstrap.min.css';

然后在我的组件中应用如下CSS样式：

const Login = ({ store }) => {
    return (
            <form>
                <div className="form-group">
                    <label htmlFor="username">User Name</label>
                    <input type="text" id="username" onChange={e => store.updateUsername(e)} value={store.username} />
                </div>
                <div className="form-group">
                    <label htmlFor="password">Password</label>
                    <input type="password" id="password" onChange={e => store.updatePassword(e)} value={store.password} />
                    <input type="submit" value="Submit" disabled={store.disableSearch} />
                </div>
            </form>
    )}

上面的代码中的

form-group是普通的引导程序类，但不适用于其上的div。我的控制台没有任何错误。

这是我的webpack.config.js：

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

const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
})

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        sourceMap: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: "[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devServer: {
        historyApiFallback: true,
    },
    plugins: [htmlPlugin]
}

我正在将Webpack 4与React 16一起使用。怎么了

Bootstrap类在React组件中不起作用

0 个答案: