首页 前端知识 Vue PostCss插件pxtorem的使用

Vue PostCss插件pxtorem的使用

2024-06-14 09:06:51 前端知识 前端哥 113 330 我要收藏

前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。

一:

1.安装依赖

npm install postcss-pxtorem -D

2.新建一个postcss.config.js文件,添加下面的配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

3.配置监听视窗变化的方法。在src下新建文件夹创建rem.js文件

// 设置 rem 函数
function setRem () {

    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
    htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

记得要全局引入,在main.js文件中引入

import './libs/rem.js';

4.这样就能实现效果了,如果你遇到下面的报错

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: E:/vue项目/vue-test): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'E:\vue项目\vue-test\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

请将postcss.config.js文件改为postcss.config.cjs文件

改完之后可能会有如下报错

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: E:/vue项目/vue-test): [Error] Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Require stack:

此时我们需要安装一下autoprefixer这个插件

npm install autoprefixer

此时项目就可以运行了

如果遇见下面报一堆红的的错误,这是因为适配版本的问题,我们只需要将postcss.config.cjs文件改为

module.exports = {
    // autoprefixer: {},
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
  
      },
      'postcss-pxtorem': {
        rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
        propList: ['*']
      }
    }
  }

此时便可以了

二:

还有一种方式是不创建postcss.config.js文件,因为在vite中内置了postcss,所以我们只需要在vite.config.ts文件里面去配置就行了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// import pxtorem from 'postcss-pxtorem'

// const my_pxtorem=pxtorem({
//     rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
//     propList: ['*']
// }   
// ) 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // css:{
  //   postcss:{
  //     plugins:[my_pxtorem]
  //   }
  // }
})

将我注释掉的部分去掉注释将是正确的配置

以上便是Vue PostCss插件pxtorem的使用了,大家感觉有用的话可以点个赞哦,嘿嘿。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12107.html
标签
postcss
评论
发布的文章

fastjson升级为fastjson2

2024-06-20 09:06:18

protobuf对象与JSON相互转换

2024-06-20 09:06:14

NVM 及 PNPM 安装

2024-06-20 09:06:01

npm有哪些插件包??

2024-06-20 09:06:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!