526互联

px 自动转 rem 配置

发布时间 2023-10-11 20:42:07作者: Better-HTQ

vite

1.安装

npm install postcss-pxtorem -D

2. 配置 （vite.config.js）

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

import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，
    //在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~styles': path.resolve(__dirname, './src/assets/styles'),
      '~components': path.resolve(__dirname, './src/components'),
    }
  },
  css: {
    postcss: {
      plugins: [
        // 配置文档：https://www.npmjs.com/package/postcss-pxtorem
        postcsspxtorem({
          rootValue: 12.8, //根元素字体大小 16/1.25
          propList: ['*'], // 匹配CSS中的属性，* 代表启用所有属性 
          unitPrecision: 5, // 转换成rem后保留的小数点位数
          minPixelValue: 12, // 小于12px的样式不被替换成rem
          exclude: ['node_modules'], //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
          // selectorBlackList: [], // 要忽略并保留为 px 的选择器
          // replace : true, // 替换包含 rems 的规则，而不是添加回退
          // mediaQuery : false, // 允许在媒体查询中转换 px
        })
      ]
    }
  }

})

3.配置 （base.css main.js）

base.css

html {
  font-size: .833333vw;
}
body {
  font-size: 0.16rem;
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import "@/assets/css/base.css"; // 新增

createApp(App).use(router).use(Antd).mount('#app')