我是ReactJS的新手，我想在我的React应用程序中包括引导
我已经通过npm安装bootstrap -save安装了bootstrap
现在，我想在React应用程序中加载引导CSS和JS。
我正在使用webpack。
webpack.config.js
var config = {
entry: './src/index',
output: {
path: './',
filename: 'index.js'
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
contentBase:'./src'
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module. exports = config;
我的问题是“如何从节点模块中包含引导CSS和JS在ReactJS应用程序中?”如何设置引导包括在我的React应用程序?
以防万一，如果你可以使用React应用程序推荐使用的yarn，
你可以，
yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific version
这将把引导程序作为依赖项添加到包中。Json也是。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "4.1.1", // it will add an entry here
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
然后在index.js文件中导入bootstrap。
import 'bootstrap/dist/css/bootstrap.css';
以防万一，如果你可以使用React应用程序推荐使用的yarn，
你可以，
yarn add bootstrap@4.1.1 // this is to add bootstrap with a specific version
这将把引导程序作为依赖项添加到包中。Json也是。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "4.1.1", // it will add an entry here
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
然后在index.js文件中导入bootstrap。
import 'bootstrap/dist/css/bootstrap.css';
通过npm，你会运行以下程序
npm install bootstrap jquery --save
npm install css-loader style-loader --save-dev
如果bootstrap为4，也添加依赖项popper.js
npm install popper.js --save
将以下内容(作为一个新对象)添加到webpack配置中
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
将以下内容添加到索引或布局中
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
如果你是React的新手，并且使用create-react-app命令行设置，运行下面的npm命令来包含最新版本的bootstrap。
npm install --save bootstrap
or
npm install --save bootstrap@latest
然后将以下import语句添加到index.js文件中。(https://getbootstrap.com/docs/4.4/getting-started/webpack/ # importing-compiled-css)
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
or
import 'bootstrap/dist/css/bootstrap.min.css';
不要忘记在目标元素上使用className作为属性(react使用className作为属性而不是class)。
