使用create-react-app創(chuàng)建項(xiàng)目

• 安裝： npm install -g create-react-app
• 創(chuàng)建項(xiàng)目：create-react-app my-app
  • cd my-app
  • yarn install
  • yarn start

使用react-app-rewired改寫項(xiàng)目有配置

• 安裝yarn add react-app-rewired --save-dev
• 在項(xiàng)目根目錄創(chuàng)建config-overrides.js文件

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

• 改寫package.json文件

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

在react-app-rewire改寫的項(xiàng)目中配置Sass和Less

1. Sass使用配置

• 安裝yarn add react-app-rewire-sass-modules sass-loader node-sass -D
• 在config-overrides.js文件中添加配置

const rewireSass = require('react-app-rewire-sass-modules');
module.exports = function override(config, env) {
    config = rewireSass(config, env);
     return config;
}

2. Less使用配置

• 安裝yarn add react-app-rewire-less -D
• 在config-overrides.js文件中添加配置

const rewireLess = require('react-app-rewire-less');
/* config-overrides.js */
module.exports = function override(config, env) {
    config = rewireLess(config, env);
    // with loaderOptions
    // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
    return config;
}