reactjs – React bootstrap没有为我的反应组件设置样式

>打字稿
> Webpack
>反应&反应DOM

我正在尝试设置Bootstrap样式.

我遵循了本教程,但修改它以适应Typescript：

https://medium.com/@victorleungtw/how-to-use-webpack-with-react-and-bootstrap-b94d33765970

一切正常,页面显示登录表单,Bootstrap HTMl由React-Bootstrap输出.但是样式不适用于元素,它只是一个纯HTML页面,没有应用任何Bootstrap样式.我不确定配置中缺少的是什么：

webpack.config.js

我已经在教程中提到的npm添加了加载器,但也调整了从css设置Typescript模块.

module.exports = {
    entry: {
        catalog: "./src/apps/CatalogApp.tsx",auth: "./src/apps/AuthApp.tsx"
    },output: {
        filename: "[name].bundle.js",publicPath: "/build/",path: __dirname + "/dist"
    },// Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts",".tsx",".js",".json"]
    },module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /.tsx?$/,loader: "awesome-typescript-loader"
            },// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",test: /.js$/,loader: "source-map-loader"
            },// css loader
            {
                test: /.css$/,loader: "typings-for-css-modules-loader?modules"
            },{
                test: /.(woff|woff2)(?v=d+.d+.d+)?$/,loader: 'url-loader?limit=10000&mimetype=application/font-woff'
              },{
                test: /.ttf(?v=d+.d+.d+)?$/,loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
              },{
                test: /.eot(?v=d+.d+.d+)?$/,loader: 'file-loader'
              },{
                test: /.svg(?v=d+.d+.d+)?$/,loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
              }
        ]
    },// When importing a module whose path matches one of the following,just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies,which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React","react-dom": "ReactDOM"
    }
};

AuthApp.tsx

这是我的应用程序入口点.

import * as React from "react";
import * as ReactDOM from "react-dom";

import { SigninForm } from "../components/users/SigninForm";
import { MiniCart } from '../components/cart/MiniCart';
import { UserMenu } from '../components/users/UserMenu';
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';

if (document.getElementById("signin-form")) {
    ReactDOM.render(
        <SigninForm />,document.getElementById("signin-form")
    );
}

if (document.getElementById('cart')) {
    ReactDOM.render(
        <MiniCart />,document.getElementById('cart')
    );
}

if (document.getElementById('user-menu')) {
    ReactDOM.render(
        <UserMenu />,document.getElementById('user-menu')
    );
}

SigninForm.tsx

以及登录表单的相关UI.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Button,Col,Row } from 'react-bootstrap';

import { Spinner } from '../shared/Spinner';

interface SigninFormProps {
}

interface SigninFormState {
  email: string;
  password: string;
}

export class SigninForm extends React.Component<SigninFormProps,SigninFormState> {

  constructor(props: SigninFormProps) {
    super(props);
    this.state = {
      email: '',password: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event: any) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event: any) {
    event.preventDefault();
    console.log('Submitting form',this.state);
  }

  render() {
    return (
      <Row>
        <Col md={8}>
          <form className="signin-form" onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label htmlFor="email">Email</label>
              <input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
            </div>
            <div className="form-group">
              <label htmlFor="password">Password</label>
              <input id="password" name="password" type="password" value={this.state.password} onChange={this.handleChange} />
            </div>
            <Button>Submit</Button>
          </form>
        </Col>
        <Col md={4}>
          Right Side
      </Col>
      </Row>
    );
  }
}