React+antd+sass项目构建

一、创建项目

1. npm install -g create-react-app

2. create-react-app antd-demo

3. cd antd-demo

二、添加antd

1. yarn add antd

2. 添加react-app-rewired 和 babel
    yarn add react-app-rewired --dev
   yarn add babel-plugin-import --dev

3. 更改package.json

  /* package.json */
  "scripts":{
    "start":"react-app-rewired start",
    "build":"react-app-rewired build",
    "test":"react-app-rewired test --env=jsdom"
  },

4. 根目录创建一个config-overrides.js用于修改默认配置。

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', {
        libraryName: 'antd',
        style: 'css'
    }], config);
    return config;
};

5.组件中使用

import { Button } from 'antd';
<Button type="primary">Button</Button>

三、添加sass
1. yarn add sass-loader node-sass --dev
2. 找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件

将module配置项的最后一项配置改成如下:

{
  loader:require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // it's runtime that would otherwise processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude:[/\.js$/,/\.html$/,/\.json$/,/\.scss$/],
  options:{
    name:'static/media/[name].[hash:8].[ext]',
  },
},
{
  test:/\.scss$/,
  loaders:['style-loader','css-loader','sass-loader'],
}

四、搭建完成

命令行执行 yarn start 即可运行 ！

五、打包设置相对路径

"homepage":"."