1. 安装create-react-app脚手架
npm install -g create-react-app
2. 构建一个react-demo的项目
create-react-app react-demo
3. 进入react-demo目录，生成webpack.config.js文件
npm run eject
4. 配置使用less， 找到webpack.config.js文件
找到Sass如下代码
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
在下面添加
// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
找到如下配置
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
直接把Sass的配置复制到下面,关键字替换为Less
//less配置 可以直接复制上面的sass配置之后改成less就行
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
保存后执行命令
yarn add less less-loader --save
或
npm add less less-loader --save
5. 移动端rem适配
安装 lib-flexible，postcss-px2rem
npm i lib-flexible --save
npm i postcss-px2rem --save
引入 lib-flexible，在项目入口文件 index.js 里 引入 lib-flexible
在 webpack.config.js 文件里 做如下修改
const px2rem = require('postcss-px2rem')
px2rem({ remUnit: 75 })
// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62
在 public/index.html 文件里把下面的这段代码注释掉
修改完毕后，重启。就可以直接在组件内写px，运行后会自动转成rem，但经过测试，发现在在js文件里写px不会转，只在css和less里会自动转rem，这点需要注意一下。
6. 常用的插件安装一下
// UI插件
npm i antd-mobile --save// 网络请求插件
npm i axios --save
//事件分发插件
npm i eventemitter3 --save
// Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
npm i lodash --save
// md5
npm i md5 --save
// qs 一个url参数转化（parse和stringify）的js库。
npm i qs --save
7. 按照下面截图，添加路由和懒加载
随后就可以愉快的开发了。
-end-
网友评论