在使用 Vite 时,你可以通过集成 postcss-px2rem 插件来实现将 CSS 中的 px 单位转换为 rem 单位,从而适配不同屏幕尺寸。以下是如何在 Vite 项目中配置 postcss-px2rem 的详细步骤: 1. 安装 postcss-px2rem 插件 首先,你需要安装 postcss-px2rem 插件。你可以使用 npm 或 yarn 进行安装: bash npm install...
在vite.config.js配置 importpostcssPluginPx2remfrom"postcss-plugin-px2rem";//引入插件//配置参数constpx2remOptions={rootValue:16,//换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了unitPrecision:5,//允许REM单位增长...
设置viewport截图 2、安装插件: npm install amfe-flexible --save npm install postcss-pxtorem --save 安装老版本报错截图 要安装postcss-pxtorem,不要安装postcss-px2rem-exclude,安装老版本会报错。 3、配置文件: Vite自身已经集成PostCSS,因此无需单独创建PostCSS配置文件,可直接在vite.config.js文件中配置css.pos...
2) document.documentElement.style.fontSize = fontSize + "px"; } // 初始化 setRem(); // 改变窗口大小时重新设置 rem,这里最好加上节流 window.onresize = function () { setRem(); }; main.tsimport './rem' 关注我 收藏该文 0 0
2. 3. 4. 5. 6. 7. 8. <van-buttontype="primary">主要按钮</van-button> 1. 安装px转rem插件 npm install postcss-px2rem-exclude lib-flexible -s 1. 新建postcss.config.js module.exports = { plugins: { ...
3、这里只实现了px转rem。还要安装amfe-flexible npm i amfe-flexible -D 4、在main.ts文件中 import 引用一下 import'amfe-flexible/index.js' 5、最后安装autoprefixer,要不然编译时会报错 npm i autoprefixer 6、最后执行命令行 " npm run dev " 运行vue项目 ...
为vite创建的vue3项目添加自动将px转成rem的插件postcss-pxtorem运行项目报错了!!!这个就很懵了,因为我用vue-cli创建的项目也是一样的postcss.config.js配置没有问题,到这居然挂了。报错内容如下: image.png 配置信息如下: //postcss.config.jsmodule.exports={plugins:{autoprefixer:{overrideBrowserslist:['Android...
今天才发现,vite使用了postcss做px转换的时候,导致index.html写的style标签里面的样式也被转换了。 超级尴尬,导致静态loading的样式会大小变化一下,很难受。 解决的思路还是很简单的,有两种方式: 添加class黑名单,这样对应的class就不会转换了; 排除指定文件,该文件不会被转换; ...
npm install postcss-px2rem-exclude lib-flexible -s 新建postcss.config.js 代码语言:javascript 代码运行次数:0 复制Cloud Studio 代码运行 module.exports = { plugins: { "postcss-px2rem-exclude": { remUnit: 75, remPrecision: 2, exclude: /node_modules|folder_name/i } } }; main.js 代码语言...
这里只实现了 px转rem,还要安装 amfe-flexible 1 npm i amfe-flexible autoprefixer -D 在main.ts文件中 import 一下就好可以了 1 import‘amfe-flexible/index.js’ 分类:vue 3.x相关 好文要顶关注我收藏该文微信分享 ygunoil 粉丝-1572关注 -10 ...