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了. 

 

 

 

posted @ 2018-07-13 09:21  童心虫鸣  阅读(730)  评论(0编辑  收藏  举报