vue cli3 添加 px2rem-loader

1.先安装 flexible和 postcss-px2rem

npm install lib-flexible --savenpm install postcss-px2rem --save

2.引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

3.px2rem配置

px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到就在项目根目录创建)

module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 75})]}}},
}

配置完成需要重启一下才可以生效哦！假如设计图给的宽度是750 我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发

如果要引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem ，将remUnit的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。

vue cli3 添加 px2rem-loader相关推荐

Vue Cli3 添加Loader和plugin
添加loader 在vue.config.js中的chainWebpack中添加配置: chainWebpack: config => {// my-loader为loader的别名,./src ...
Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
Vue cli3 库模式搭建组件库并发布到 npm
三.规划目录结构 1.创建项目在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择. $ vue create . 2.调整目录我们需要一个目录存放组件,一个目录存放示例,按照以下方式 ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
公司项目vue cli2升级到vue cli3
背景: 公司项目历时时间较长,通过长时间的迭代,目前项目文件较多(src目录下有2217个文件),系统庞大, 之前通过vue cli2脚手架构建的项目框架,在本地开发时已经明显感觉到吃力(项目首次启动 ...
Vue Cli3安装配置步骤
一.准备工作: mac系统的前面加上sudo获取管理员权限安装node.js(自带了软件包管理工具npm) 安装webpack,命令: sudo npm install webpack -g //- ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...

vue cli3 添加 px2rem-loader

1.先安装 flexible和 postcss-px2rem

2.引入lib-flexible

3.px2rem配置

vue cli3 添加 px2rem-loader相关推荐

最新文章

热门文章