使用vue构建移动端h5页面,并将px转换为rem(ts)

juvialoxer

已于 2022-02-16 17:16:49 修改

阅读量1.2k

点赞数 1

文章标签： typescript css

于 2020-09-01 17:23:35 首次发布

原文链接：https://blog.youkuaiyun.com/sinat_41087851/article/details/101781228

版权

一、安装

npm install postcss-pxtorem@5.1.1

npm i amfe-flexible -S

二、在main.ts中引入

import 'amfe-flexible/index'

三、在vue.config.js中添加

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 37.5, // 换算的基数(设计图375的根字体为37.5)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}