lavas2.0配置px2rem的问题
问题lavas1.0升级成2.0后,项目结构有了好多大改变,连基本的配置都没有了头绪,多看了几遍文档以及结合自己之前的项目的经验,总结了一些自己用到的配置的配置问题。希望对你们有所帮助!!
1.移动端配置px2rem
安装npm install px2rem-loader lib-flexible –save
在项目入口文件core/app.js中引入lib-flexible
import ‘lib-flexible/flexible.js’
安装 npm install webpack-px2rem-loader或者 cnpm install webpack-px2rem-loader
找到 /lavas.config.js 文件
build:{ //使用插件 extendWithWebpackChain: (config, { type, env }) => { // 在 friendly-error 插件创建时扩展自定义参数 // config.plugin('friendly-error').init((Plugin, args) => { // let customParams = {}; // 扩展传入插件构造函数的参数 // return new Plugin(...args, customParams) // }); // 添加第三方插件到指定 Lavas 内置 html 插件之后 // config.plugin('my-plugin').after('html').use(MyPlugin); config.plugins.delete("no-emit-on-errors"); config.module .rule("px2rem") // .test(/\.(vue)$/) .test(/\.(vue|scss|css)$/) .use("webpack-px2rem") .loader("webpack-px2rem-loader?min=9&floatWidth=2&basePx=37.5") /* basePx:10 ,//1rm = npx 默认为10 min:9 ,//只会转换大于min的px 默认为0 因为很小的px(比如border的1px)转化成rem后在很小的设备上结果会小于1px,有的设备就会不显示 floatWidth:3 //转化后的rem值保留的小数点后位数 默认为3 */ .end() .exclude.add(/node_modules/); } }
然后lavas dev 重启项目你就可以愉快的使用px了.