调查发现现在使用create-react-app 网上的文章怎么都实现不了自动px2rem,,故捯饬了一下:
1、使用create-react-app 安装ts版本
npx create-react-app demo-ts --typescript
2、进入项目 打开ide
cd demo-ts
code . // 进入vscode
3、安装UI、react-app-rewired(自定义启动配置)和按需加载模块
antd-mobile
react-app-rewired customize-cra
babel-plugin-import
yarn add antd-mobile react-app-rewired customize-cra babel-plugin-import
修改启动配置 package.json:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
4、然后在项目根目录创建一个 config-overrides.js
用于修改默认配置。
const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: 'css',
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
})
);
5、如果不放心,可以先yarn start 启动并编写一个less文件试试,报错:Cannot find module 'less-loader'
安装:
yarn add less less-loader
6、安装px2rem
yarn add postcss-pxtorem lib-flexible
1、根目录index.jsx 引入lib-flexible 实现动态根px变化:
import "lib-flexible"
2、修改配置文件,以支持px2rem, config-overrides.js:
const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: 'css',
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
addPostcssPlugins([require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
// propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
// propWhiteList: []
}),])
);
重启查看结果: