react 使用 postcss-px-to-viewport 实现 px 自动转 vw 自适应

最近做了一个 react + next 的网址大全项目,需要实现不管是大屏还是小屏,都能让整个页面在一页中显示而不出现滚动条,一顿操作后还是有点小瑕疵,大佬给我推荐了一个插件:postcss-px-to-viewport,试了一下,确实好用,记录一下。

一、安装 postcss-px-to-viewport

bash 复制代码
pnpm install postcss postcss-px-to-viewport --save-dev

安装完后,可以看到我们的项目依赖中多了一行

二、在项目根目录创建 postcss.config.js 文件

键入以下内容

javascript 复制代码
module.exports = {
  plugins: {
    'postcss-import': {}, // 必须放在第一个
    'postcss-px-to-viewport': {
      viewportWidth: 1920,
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false
    },
  }
}

三、修改 next.config.ts 文件

javascript 复制代码
import type { NextConfig } from 'next';
import { join, resolve } from 'path';

const nextConfig: NextConfig = {
  output: 'export',
  distDir: 'build',
  // 使用相对路径前缀,确保静态资源可以正确加载
  assetPrefix: './',
  images: {
    unoptimized: true,
  },
  outputFileTracingRoot: process.cwd(),
  experimental: {
    optimizeCss: false
  },

  webpack: (config, { isServer }) => {
    // 配置 CSS 输出路径
    if (!isServer) {
      const miniCssExtractPlugin = config.plugins.find(
        (p: { constructor: { name: string; }; }) => p.constructor.name === 'MiniCssExtractPlugin'
      );
      if (miniCssExtractPlugin) {
        (miniCssExtractPlugin as any).options.filename = 'static/css/[name].[contenthash].css';
        (miniCssExtractPlugin as any).options.chunkFilename = 'static/css/[name].[contenthash].css';
      }
    }

    // 配置 manifest 文件输出路径
    config.plugins.push(
      new (require('webpack').DefinePlugin)({
        'process.env.MANIFEST_OUTPUT_PATH': JSON.stringify(
          resolve(__dirname, 'build/_next/static')
        )
      })
    );

    // 配置图片和其他资源的输出路径
    config.module.rules.forEach((rule: { oneOf: any[]; }) => {
      if (rule.oneOf) {
        rule.oneOf.forEach((oneOfRule: { type?: string | undefined; generator?: { filename: string; } | undefined; test?: { test: (arg0: string) => boolean; } | undefined; }) => {
          const assetRule = oneOfRule as { type?: string; generator?: { filename: string; }; test?: { test: (arg0: string) => boolean } };
          
          if (assetRule.type === 'asset') {
            assetRule.generator = {
              filename: 'static/media/[name].[contenthash][ext]',
            };
          }

          if (
            assetRule.test &&
            typeof assetRule.test.test === 'function' &&
            assetRule.test.test('.svg')
          ) {
            assetRule.generator = {
              filename: 'static/media/[name].[contenthash][ext]',
            };
          }
        });
      }
    });

    // 确保公共路径正确设置
    config.output = {
      ...config.output,
      publicPath: './_next/',
    };

    return config;
  },
};

export default nextConfig;

大功告成!现在跑动项目,会发现,我们的 px 变成了 vw,可以自动自适应啦!

相关推荐
前端菜鸟日常10 小时前
pako处理 urlencode(gzcompress(json_encode($res))) php的加密方式web解析
前端
java水泥工10 小时前
师生健康信息管理系统|基于SpringBoot和Vue的师生健康信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
大厂码农老A11 小时前
P10老板一句‘搞不定就P0’,15分钟我用Arthas捞回1000万资损
java·前端·后端
拜无忧11 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
星海穿梭者11 小时前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手11 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i11 小时前
关于浏览器 Cookie 共享机制的学习与梳理
前端
文心快码BaiduComate11 小时前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin11 小时前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍12 小时前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端