使用create-react-app构建项目（webpack+antd+scss）

1.安装脚手架

$ npm install -g create-react-app

2.通过脚手架搭建项目

$ create-react-app <项目名称> 

3.开始项目

$ cd <项目名称>

4.常用脚本命令说明

$ npm run start :开始项目，通过http://localhost:3000可进行访问
$ npm run build :项目打包，打包的文件回放在build目录中
$ npm run eject:将隐藏的配置导出；该操作是单向操作，一旦eject，就不容易恢复

5.暴露配置

$ npm run eject

6.下载安装依赖:sass-loader sass

$ npm install sass-loader node-sass --save-dev

7.修改config目录下的webpack配置文件：（webpack.config.dev.js和webpack.config.prod.js都需要修改)

{
            test: /\.css$/,  //修改为==>test: /\.(css|scss)$/
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,//修改为==>importLoaders: 2,
                },
              },
              {
                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',
                    }),
                  ],
                },
              },
                //新增--begin
              {
                loader: require.resolve('sass-loader'),
              },
               //新增--end

            ],
          },

注意:一定要两个文件都改

8.在react中使用antd

通过暴露配置配合babel-plugin-import插件实现按需加载

引入antd依赖包
$ npm install antd -S

安装插件
$ npm install babel-plugin-import --save-dev

修改package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
},

配置完成后只需要直接导入antd组件，不需要引入css样式

import { Button } from 'antd';

9.引入路由Router

$ npm install -save react-router-dom

 

至此，一个支持scss+antd+router的react的项目基本配置和结构就完成了，剩下的文件目录的结构就交给大家按照习惯去配置啦