vue项目中使用postcss-px2rem的2种方法 在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.) 如何使用: 1.安装 npm i p...
配置postcss-px2rem vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。 px2rem的配置放在vue-cli3 项目中vue.config.js中。 vue-cli3创建的项目是没有vue.config.js的,但是最后你开发完了项目也要打包的,到时候也得手动创建这个文件! 手动...
首先,你需要在Vue 3项目中安装postcss-px2rem插件。你可以使用npm或yarn进行安装: bash npm install postcss-px2rem --save-dev 或者 bash yarn add postcss-px2rem --dev 2. 在Vue 3项目的postcss配置文件中引入postcss-px2rem Vue CLI 3及以上版本的项目通常会有一个postcss.config.js文件,用于配置Pos...
require('postcss-plugin-px2rem')({ rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 // unitPrecision: 5, //允许REM单位增长到的十进制数字。 //propWhiteList: [], //默认值是一个空数组,这意味着禁用白...
npm i postcss-plugin-px2rem --save -dev 1. 或选择 npm i postcss-pxtorem --save -dev 1. 或选择 npm i postcss-loader --save-dev 1. 具体配置方法如下: 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个)。
在vue-cli3中使用postcss-pxtorem和 postcss-px2rem 配置类似,如下: 使用postcss-pxtorem 时vue.config.js配置: module.exports ={ lintOnSave:true, css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({//这里是配置项,详见官方文档rootValue :1,//换算的基数selectorBlackList : ...
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js) 具体配置内容如下: 1 module.exports = { 2 css: { 3 loaderOptions: { 4 css: {}, 5 postcss: { 6 plugins: [ ...
postcss-plugin-px2rem在vue.confing中常用配置为: css:{loaderOptions:{postcss:{plugins:[require('postcss-plugin-px2rem')({// rootValue: 100, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许...
今天,我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在main.js引入适配包 import Vue from ‘vue’ import App from ‘./App.vue’
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js) 具体配置内容如下: module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ ...