使用create-react-app创建项目
- 安装：
npm install -g create-react-app
- 创建项目：
create-react-app my-app
cd my-appyarn installyarn start
使用react-app-rewired改写项目有配置
- 安装
yarn add react-app-rewired --save-dev
- 在项目根目录创建
config-overrides.js文件
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
/* 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改写的项目中配置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;
}
