如何在react项目中配置less
时间:2018-11-07
本文章向大家介绍如何在react项目中配置less,需要的朋友可以参考一下
配置less
安装less-loader
yarn add less-loader
打开 webpack.config.dev.js 和 webpack.config.prod.js
找到 test: /\.css$/, 修改为 test: /\.(css|less)$/,
找到 text 字段下的 use ,给use数组在添加一个对象 { loader: require.resolve('less-loader')}
重启服务
启用css作用域(css只对本页面生效)
打开 webpack.config.dev.js 和 webpack.config.prod.js
找到 loader: require.resolve('css-loader') 下的 options 字段, 给这个对象新增一个字段 modules: true
页面调用
import style from './style.less' console.log(style) // class名均为style对象的key,所以调用必须使用style.App render() {return ( <div className={style.App}> </div> ) }
重启服务 & 查看效果
px转换成rem
安装 postcss-px2rem
yarn add postcss-px2rem
打开 webpack.config.dev.js 和 webpack.config.prod.js
// 调用postcss-px2rem const px2rem = require('postcss-px2rem')
在css-loader中找到 autoprefixer 这个属性,在这个属性之后添加 px2rem({ remUnit: 75 })
autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' // React doesn't support IE8 anyway ], flexbox: 'no-2009' }), px2rem({ remUnit: 75 })
重启服务 & 查看效果
附 : 完整代码
webpack.config.dev.js
// webpack.config.dev.js { test: /\.(css|less)$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true // 是否启动css局部作用域 } }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' // React doesn't support IE8 anyway ], flexbox: 'no-2009' }), px2rem({ remUnit: 75 }) //设计稿根据750px(iphone6) ] } }, { loader: require.resolve('less-loader') } ] },
webpack.config.prod.js
// webpack.config.prod.js { test: /\.(css|less)$/, loader: ExtractTextPlugin.extract( Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false } }, use: [ { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, // 是否启动css局部作用域 minimize: true, sourceMap: shouldUseSourceMap } }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' // React doesn't support IE8 anyway ], flexbox: 'no-2009' }), px2rem({ remUnit: 75 }) //设计稿根据750px(iphone6) ] } }, { loader: require.resolve('less-loader') } ] }, extractTextPluginOptions ) ) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. },
style.less
.App { text-align: center; font-size: 16px; .goto { color: red; } }
App.vue
// 页面调用 import style from './style.less' // console.log(style) 输出:{App:{...},goto:{...}} <div className={style.App}> <Link to="/series" className={style.goto}> 跳转 </Link> </div>
- Gym 100952D&&2015 HIAST Collegiate Programming Contest D. Time to go back【杨辉三角预处理,组合数,dp】
- Gym 100952B&&2015 HIAST Collegiate Programming Contest B. New Job【模拟】
- 51 Nod 1008 N的阶乘 mod P【Java大数乱搞】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战06】给Agent添加记忆功能
- Gym 100952A&&2015 HIAST Collegiate Programming Contest A. Who is the winner?【字符串,暴力】
- [开源,学习,分享]UWP第三方简书客户端分享
- HDU 1024 Max Sum Plus Plus【动态规划求最大M子段和详解 】
- 51 Nod 1057 N的阶乘【Java大数乱搞】
- 2017 Multi-University Training Contest - Team 1 1011&&HDU 6043 KazaQ's Socks【规律题,数学,水】
- 2017 Multi-University Training Contest - Team 1 1001&&HDU 6033 Add More Zero【签到题,数学,水】
- 51 Nod 1005 大数加法【Java大数乱搞,python大数乱搞】
- 51 Nod 1029 大数除法【Java大数乱搞】
- 51 Nod 1027 大数乘法【Java大数乱搞】
- SQL常用的基础语法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义Notification添加点击事件
- 深入理解Android Bitmap
- Android基于AlarmManager实现用户在线心跳功能示例
- 详解Android中获取软键盘状态和软键盘高度
- Android流式布局FlowLayout详解
- Linux 专题
- Go语言实现UDP通信
- Android多渠道打包的方法步骤
- Android编程实现压缩图片并加载显示的方法
- Android串口通信封装之OkUSB的示例代码
- Android 中Activity 之间传递参数
- Android开发简单实现摇动动画的方法
- Android 中menu同时显示图标和文字的实现
- android基于SwipeRefreshLayout实现类QQ的侧滑删除
- PopupWindow自定义位置显示的实现代码