next.js项目有什么px转vw的方案吗？

Question

使用next.js搭建的移动端项目，我先是尝试了用postcss-px-to-viewport进行单位转换，但是next.js项目内置的是postcss8.0版本，而postcss-px-to-viewport不支持postcss8.0，将postcss降级到7.0后next.js又会出问题，所以暂时放弃。

所以大家写next.js是使用的什么方案进行单位转换的呢？postcss-px-to-viewport是我配置的有问题吗？

Answer 1

可以用这个，这个是和postcss 8.0兼容的版本： https://github.com/tcstory/po...

安装方法：

npm install @tcstory/postcss-px-to-viewport --save-dev

或

yarn add -D @tcstory/postcss-px-to-viewport

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

我今天在做项目的时候碰到同样的问题，研究了一阵子，用一种方法解决了，可以参考，或者后续其他人有更好的解决方案，我也希望能看看
安装这个适配的库

pnpm add postcss-px-to-viewport-8-plugin -D

然后配置一下你的postcss.config.js的文件
此时此刻你的css文件应该是可以自动转换的， 但是scss不可以，我猜想的原因可能是next针对于scss 和 postcss的执行顺序可能有问题，所以就自己在next.config.js里面适配了一下

pnpm add postcss-loader@^6.1.1 -D
pnpm add sass-loader -D

const nextConfig = {
 ....
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.module.scss$/,
      use: [
        {
          loader: "postcss-loader",
        },
        {
          loader: "sass-loader",
        },
      ],
      // 排除 node_modules 目录下的文件
      exclude: path.resolve(__dirname, "node_modules"),
    })

    return config
  },
}

不能使用.scss 那样会与全局默认配置冲突， 正好我们组件的scss都是module形式
这样刚好解决
还希望有其他更正式的办法