反応のブートストラップは反応成分をスタイリングしていません

Question

昨日Reactを使い始めましたので、デモアプリケーションを設定しました。環境は次のとおりです。

1. 活字体
2. のWebPACK
3. &が、私はセットアップブートストラップスタイルにしようとしているDOM

に反応反応します。

私は一緒にこのチュートリアルに続くが、活字体に合うように修正：

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

すべてが動作しますが、ページには、サインインフォームを表示し、ブートストラップHTMLが反応-ブートストラップをして出力されます。しかし、スタイルは要素には適用されません。単純なHTMLページであり、ブートストラップスタイルは適用されません。私は設定から​​欠落してるかわからないんだけど：

webpack.config.js

私はチュートリアルで述べたように、NPMを通じてローダーを追加するだけでなく、セットアップ・活字体モジュールに調整してきましたCSSから。

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

使用するウェブパックの設定は、中級記事と少し異なります。

この中の記事では、著者は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<style/>タグにCSSコードを注入します。だからこそチュートリアルの仕事は

webpackの設定では、typings-for-css-modules-loaderを使ってCSSを読み込みます。このローダーでは、cssクラスの変数名をclassNameに渡す必要があります。

それはあなたが（いくつかのコードを簡素化する）のようなコードを書く必要があります意味：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]を。

私はうまくいくと思います。

btwの場合、typings-for-css-modules-loader - >linkを使用する別の媒体記事が見つかりました。