以下是一些建议和排查步骤：1. 检查postcss-pxtorem配置： 确保你的postcss.config.js文件中的postcss-pxt...
在Vue 2项目中使用postcss-pxtorem插件,可以帮助你将CSS中的px单位自动转换为rem单位,从而实现响应式设计。以下是详细步骤: 1. 安装依赖 首先,你需要在项目中安装postcss-pxtorem及其相关依赖。 bash npm install postcss-pxtorem postcss postcss-loader --save-dev 2. 配置postcss.config.js 在项目根目录下创建或...
创建.postcssrc.js const autoprefixer = require("autoprefixer"); const pxtorem = require("postcss-pxtorem"); module.exports = ({ file }) => { let rootValue; //网络上有很多写法是: //const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750; /...
在VS Code中打开项目,并依次安装以下插件:Vant UI组件(使用命令npm i vant@latest-v2 -S),babel-plugin-import(使用命令npm i babel-plugin-import -D),less和less-loader(使用命令npm add less less-loader -D),以及lib-flexible(使用命令npm i lib-flexible -D)。 对babel.config.js进行相应配置 创建并...
exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, };Tips: 在配置 postcss-pxtorem 时,同样应避免 ignore node_modules 目录,否则会导致 vue2-vant2-components 样式无法被编译。其他设计稿尺寸如果设计稿的尺寸不是 375,而是 750 或其他大小,可以将 rootValue ...
vue项目中使用postcss-px2rem的2种方法 在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.) ...
npmipostcss-pxtorem--save-dev 或 npmipostcss-px2rem--save-dev 或 npmipostcss-loader--save-dev 配置方法 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中(默认为空,如果没有这个文件自己写一个) module.exports= {//px转rem的配置(postcss-plugin-px2rem插件)lintOnSave...
思路:使用lib-flexible结合postcss-pxtorem实现 第一步 在项目utils下建立flexible.js文件(直接下载则不用新建该文件) 第二部 复制以下代码到刚建好的文件中或者直接yarn install lib-flexible-pc-y // 基于 libflexible 用来适配pc端(function(win, lib) {vardoc = win.document;vardocEl = doc.documentElement;va...
"postcss-pxtorem": { rootValue: 16, //结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*'] ...
2.配置postcss-pxtorem,设计图尺寸是375px,postcss-pxtorem升级之前的写法是rootValue:37.5,但是经过转换后的尺寸却特别的小,页面看起来就像是平板或者pc上的,经过测试发现改成rootValue:16或者viewportWidth: 375会和升级之前的rootValue:37.5几乎没有差别 const { defineConfig } = require("@vue/cli-service"); ...