在Vue 2项目中使用postcss-pxtorem插件,可以帮助你将CSS中的px单位自动转换为rem单位,从而实现响应式设计。以下是详细步骤: 1. 安装依赖 首先,你需要在项目中安装postcss-pxtorem及其相关依赖。 bash npm install postcss-pxtorem postcss postcss-loader --save-dev 2. 配置postcss.config.js 在项目根目录下创建或...
以下是一些建议和排查步骤：1. 检查postcss-pxtorem配置： 确保你的postcss.config.js文件中的postcss-pxt...
创建.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进行相应配置 创建并...
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...
exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], }, }, };Tips: 在配置 postcss-pxtorem 时,同样应避免 ignore node_modules 目录,否则会导致 vue2-vant2-components 样式无法被编译。其他设计稿尺寸如果设计稿的尺寸不是 375,而是 750 或其他大小,可以将 rootValue ...
思路:使用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: {postcssOptions: { #加上此配置,网上很多是没有,运行会报错 plugins: [ require('postcss-pxtorem')({ rootValue : 16, // 换算的基数 minPixelValue: 2, selectorBlackList : [], // 忽略转换正则匹配项 列入一些ui库, ['.el'] 就是忽略elementUI库 ...
2.配置postcss-pxtorem,设计图尺寸是375px,postcss-pxtorem升级之前的写法是rootValue:37.5,但是经过转换后的尺寸却特别的小,页面看起来就像是平板或者pc上的,经过测试发现改成rootValue:16或者viewportWidth: 375会和升级之前的rootValue:37.5几乎没有差别 const { defineConfig } = require("@vue/cli-service"); ...
npmiamfe-flexiblepostcss-pxtorem@5.1.1-D或yarnaddamfe-flexiblepostcss-pxtorem@5.1.1-D main.js 导入根据屏幕宽度变化 修改html、body的fontSize的插件 import'amfe-flexible' 在vue.config.js 中配置 module.exports={css:{loaderOptions:{postcss:{plugins:[require("autoprefixer")({// 配置使用 autoprefixer...