vue-cli3使用rem

最新推荐文章于 2024-12-18 11:33:45 发布

挥墨染千秋

最新推荐文章于 2024-12-18 11:33:45 发布

阅读量428

点赞数

分类专栏： Vue使用文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_29009973/article/details/107468418

版权

Vue使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用px2rem-loader将像素单位转换为rem单位，实现响应式布局。通过安装px2rem-loader和amfe-flexible，并在vue.config.js中配置chainWebpack，最终在main.js中引入amfe-flexible来完成设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install px2rem-loader --dev
npm install amfe-flexible  --save

vue.config.js

chainWebpack(config) {
    config.module
      .rule('scss')
      .oneOf('vue')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .before('sass-loader') // this makes it work.
      .options({ remUnit: 75, remPrecision: 8 })
      .end()
}

main.js