rem

作者: 前端陈陈陈 | 来源:发表于2019-11-06 11:06 被阅读0次

rem

1、第一步安装:npm i amfe-flexible --save-dev

2、在main.js导入:

import 'amfe-flexible'

3、在/vue.config.js添加px2rem插件,把项目中的px转为rem (下面的是所有的vue.config里面的文件)



const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");

module.exports = {
    // 关闭eslint检查
    lintOnSave: false,
    // 配置css前缀,px转rem
    css: {
        loaderOptions: {
            // 后处理器配置
            postcss: {
                plugins: [
                    // 配置样式前缀
                    autoprefixer(),
                    // 把px转为rem
                    pxtorem({
                        rootValue: 37.5,
                        propList: ["*"]
                    })
                ]
            }
        }
    },
        // 资源路径
   publicPath: '/web04/chenchao-fresh/dist/',
    // 打包路径
    //    outputDir: 'chenchao-fresh',
    // 关闭eslint检查
    lintOnSave: false
};

4、下载:npm i postcss-pxtorem

5、下载:npm i autoprefixer

相关文章

网友评论

      本文标题:rem

      本文链接:https://www.haomeiwen.com/subject/dgxubctx.html