@vue/cli将px转换成rem单位配置(flexible,px2rem)

最新推荐文章于 2023-07-14 10:37:23 发布

原创最新推荐文章于 2023-07-14 10:37:23 发布 · 318 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue3项目中配置px2rem，实现响应式布局。通过安装lib-flexible、postcss-loader和postcss-px2rem，以及在vue.config.js中设置postcss-loader插件，实现px单位自动转换为rem单位。文章还提供了处理1px边框和font-size属性的技巧。

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

与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件。而在原来的2.x版本，我们可以在utils.js中轻松配制px2rem相关配置。为了解决这个问题，我研究了一下vue-cli的官方文档，发现我们仍然可以像以往那样配制。具体步骤如下：

安装

安装lib-flexible： npm install --save lib-flexible

安装postcss-loader和postcss-px2rem： npm install --save-dev postcss-loader postcss-px2rem

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'(加上.js会通不过eslint的语法校验)

在根目录下创建配制文件vue.config.js，并配制如下信息

module.exports = {
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
        plugins: [require('postcss-px2rem')({
          remUnit: 75,
        })],
      },
    },
  },
}

这个文件配制的信息将会被合并到类似原来2.x版本的webpack.config.js当中。

注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。