This article only talks about the detailed steps and does not explain the reasons, only to build the process for the record for future use.
1. Install node6.0 or above
2.npm i -g create-react-app
3.create-reacte-app my-app
4.cd my-app
5.npm run eject
6.npm i --save jquery react-bootstrap redux react-redux react-router react-router-dom
7.npm i --save-dev extract-text-webpack-plugin node-sass sass sass-loader
8. Modify the css part of webpack.confg (prod, dev) to (loader order cannot be changed because the parsing order is from back to front)
{
test: /\.(css|scss)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:"[name]__[local]___[hash:base64:5]",
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader:require.resolve('sass-loader')
}
],
},9. Change the suffix of all custom css files to scss
10. Download the compressed package of bootStrap, unzip the three folders fonts, css, and js to the public directory of the project and import it in index.html
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
