刚开始使用React昨天设置了一个演示应用程序。环境是:
我正在尝试设置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>
);
}
}
您使用的webpack配置与媒体文章略有不同。
在中篇文章中,作者使用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类变量名称传递给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的中篇文章。
我遇到了同样的问题,这对我有用 - >
我最后用npm安装bootstrap:
npm i --save bootstrap
然后,在index.js
(我渲染App.js)中,我从nodes_modules导入了bootstrap的缩小的css文件,如下所示:
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
现在响应式定位正在工作(在此之前,我看到react-bootstrap
呈现正确的类名,但没有样式)。
注意:https://react-bootstrap.github.io/getting-started/introduction说你应该把css添加到index.html
的头部。我没有成功这样做。
此时我不确定是否相关我检查了你的帖子。但是我可以使用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标头标签中。
我还在我的app.js中添加了import "react-bootstrap/dist/react-bootstrap.min.js";
。
首先,您需要使用NPM安装Bootstrap
npm install --save bootstrap
然后
去编写这个语句,你必须使用bootstrap,这适用于我的情况。
import 'bootstrap/dist/css/bootstrap.css';
CSS样式将开始工作。 :)
快乐的编码!