Vite 默认支持PostCSS,但你需要手动在postcss配置中引入postcss-pxtorem。由于Vite的配置可能依赖于项目结构,这里给出一个通用的例子,其中你可能需要调整以匹配你的项目结构。 首先,确保你的项目中有一个postcss.config.js文件(如果没有,则创建一个)。然后,在该文件中配置postcss-pxtorem: javascript // postcss.config...
"mono1": "vite serve src/packages/template1/ --config ./vite.config.ts", "mono2": "vite serve src/packages/template2/ --config ./vite.config.ts", } 1. 2. 3. 4. 5. 6. 静态资源管理 vite对大多数静态资源类型进行了内置处理,如果还有不支持的通过assetsInclude添加支持. 静态资源体积 >=...
npm install amfe-flexible --save-dev//pnpm方式pnpm add postcss-pxtorem -D pnpm add amfe-flexible -D 在main.ts中引入: import 'amfe-flexible' 可以看到,html元素的字体大小被设置为**设备宽度/10,**证明amfe-flexible配置成功: 在vite.config.js中配置postcss-pxtorem: import postCssPxToRem from "postcs...
npm install postcss-pxtorem --save 安装老版本报错截图 要安装postcss-pxtorem,不要安装postcss-px2rem-exclude,安装老版本会报错。 3、配置文件: Vite自身已经集成PostCSS,因此无需单独创建PostCSS配置文件,可直接在vite.config.js文件中配置css.postcss选项。 vite.config.js文件中配置postcss截图 4、导入: 在main....
npm install postcss-pxtoremvite.config.tsimport postCssPxToRem from "postcss-pxtorem" ...css: { postcss: { plugins: [ postCssPxToRem({ rootValue: 16, // 1rem的大小 propList: ['*'], // 需要转换的属性,这里选择全部都进行转换 }) ] } }, ...
postCssPxToRem({ rootValue: 192, // (设计稿/10)1rem的大小 propList: ["*", "!border","!font-size"], // 除 border/font-size 外所有px 转 rem }) ] } } 3.在main.ts里 import 'amfe-flexible' 这样,你就可以在Vue3+Vite项目中成功使用PostCSS-pxtorem和amfe-flexible实现自适应了。
配置插件实现 一、分包策略 1)浏览器的缓存策略: 访问网站时向服务器获取静态资源并缓存起来,如css、js等 下次再访问时,如果之前保存的 “静态资源” 名字没有改变,则不会重新请求 2)vite打包文件生成策略: 打包时只要代码内容变了,就会生成hash字符完全不同的新文件 ...
为vite创建的vue3项目添加自动将px转成rem的插件postcss-pxtorem运行项目报错了!!!这个就很懵了,因为我用vue-cli创建的项目也是一样的postcss.config.js配置没有问题,到这居然挂了。报错内容如下: image.png 配置信息如下: //postcss.config.jsmodule.exports={plugins:{autoprefixer:{overrideBrowserslist:['Android...
npm i postcss-pxtorem lib-flexible //main.js引入 // 移动端适配 import 'lib-flexible/flexible.js' //postcss.config.cjs 配置 module.exports = { plugins: { "autoprefixer": {}, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], ...