安装脚手架
npm install create-react-app
利用脚手架搭建项目
npx creact-react-app
暴露配置项
npm run eject
如果需要安装less
- 打开webpack.config.js找到下面代码所在位置
style files regexes
- 将以下代码添加到规则后面
// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
- 添加完成后找到oneOf位置，添加以下代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 4,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 4,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},
- 安装 less 和 less-loader 插件
npm install less less-loader --s
- 重新编译即可
注意，如果使用ant-design-mobile的话，请优先配置less，确认配置有效了再安装ant-desian-mobile，不然会出现莫名奇妙的less不生效，项目启动正常，还不报错，至今我也未找到原因，有找到原因的大佬请联系我，传送门在此。然后我在不安装ant-design-mobile的情况下，项目安装less正常
如果需要做移动端适配
- 使用yarn 安装项目所需依赖后，安装 lib-flexible 、 postcss-px2rem 和 postcss-loader：
yarn add postcss-px2rem lib-flexible
yarn add postcss-loader --dev
- 在入口页面 index.html 中设置<meta>标签：
<meta name="viewport" content="width=device-width,inital-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
- 然后在项目入口文件 index.js 中引入 lib-flexible：
import 'lib-flexible';
- 接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem ：
const px2rem = require('postcss-px2rem')
- 同时，在 webpack.config.js 的 postcss-loader loader里面添加 ：
{
loader: require.resolve('postcss-loader'),
options: {
/* 省略代码... */
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
px2rem({remUnit: 37.5}), // 添加的内容
/* 省略代码... */
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
