React bootstrap 没有设计我的 React 组件

Question

昨天刚开始使用 React，所以设置了一个演示应用程序。环境是：

打字稿
Webpack
反应与反应 DOM

我正在尝试设置 Bootstrap 样式。

我遵循了本教程，但对其进行了修改以适应 Typescript：

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

一切正常，页面显示登录表单，Bootstrap HTMl 由 React-Bootstrap 输出。但样式并未应用于元素，它只是一个普通的 HTML 页面，应用了 Bootstrap 样式中的 none 。我不确定配置中缺少什么：

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

Answer 1

您使用的 webpack 配置与中篇文章略有不同。

在medium文章中，作者使用style-loader和css-loader来处理css个文件。

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      ...
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      ...
    ]
  },
};

style-loader 会将 css 代码注入 <style/> 标签。这就是教程工作的原因

在您的 webpack 配置中，您使用 typings-for-css-modules-loader 加载 css。使用此加载程序，您需要将 css class 变量名传递给 className.

这意味着你应该这样写代码（简化一些代码）：

import * as React from "react";
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';

import { Button, Col, Row } from 'react-bootstrap';

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

export class SigninForm extends React.Component {
  ...
  render() {
    return (
      <Row>
        <Col md={8}>
          <form className={bt["signin-form"]} onSubmit={this.handleSubmit}>
            <div className={bt["form-group"]}>
              <label htmlFor="email">Email</label>
              <input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
            </div>
            <Button>Submit</Button>
          </form>
        </Col>
        <Col md={4}>
          Right Side
      </Col>
      </Row>
    );
  }
}

将 bt[classname] 传递给 className。

我认为它会起作用。

顺便说一句，我找到了另一篇使用 typings-for-css-modules-loader -> link.

的媒体文章

Answer 2

我运行遇到了同样的问题，这对我有用 -->

我最终使用 npm 安装了 bootstrap：

1) npm i --save bootstrap

然后，在 index.js（我渲染 App.js 的地方）我从 nodes_modules 导入了 bootstrap 的缩小 css 文件，如下所示：

2) import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

现在响应式定位开始工作了（和以前一样，我看到 react-bootstrap 呈现正确的 class 名称，但没有样式）。

注意：https://react-bootstrap.github.io/getting-started/introduction 表示您应该将 css 添加到 index.html 的头部。我这样做没有成功。

Answer 3

我检查了您的 post，目前不确定它是否相关。但是我可以使用 react-bootstrap，根据 react-bootstrap，您必须添加“ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous" />

我将其添加到我的 index.html header 标签中。

而且我还在 app.js 中添加了 import "react-bootstrap/dist/react-bootstrap.min.js";。

Answer 4

首先你需要做的是 使用 NPM 安装 Bootstrap

npm install --save bootstrap

然后

去在您必须使用的组件中编写此语句 bootstrap，这适用于我的情况。

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

CSS 样式将开始工作。 :)

祝您编程愉快！

Answer 5

在 App.css 只需粘贴以下导入：

@import "bootstrap/dist/css/bootstrap.css";

Answer 6

请尝试在index.js

中添加这一行

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

将此添加到 App.js 文件对我不起作用

Answer 7

连同bootstrap.min.js，我们需要使用bootstrap.min.css才能得到bootstrap 在职的。访问 https://www.bootstrapcdn.com/ 并复制 CSS 和 JavaScript 下的链接并将其粘贴到 HTML 文件中 在 head 标签下。

如下使用并相应地更改 bootstrap 版本。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap**@5.1.1**/dist/css/bootstrap.min.css"  crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap**@5.1.0**/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

React bootstrap 没有设计我的 React 组件

React bootstrap not styling my react components

reactjs

webpack-2