本文章只讲详细步骤不解释原因,只为记录搭建过程,以便将来使用。
1.安装node6.0以上
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.修改webpack.confg(prod,dev)的css部分 为(loader顺序不能变,因为解析顺序是从后向前的)
{
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.将所有自定义css文件的后缀都改为scss
10.下载bootStrap的压缩包,解压得到的三个文件夹fonts,css,js复制到项目public目录下并在index.html中引入
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">