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,可以自动自适应啦!

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github