craco配置postcss8下的postcss-px-to-viewport插件

最新推荐文章于 2024-05-07 15:15:45 发布

语轻星子

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量4.3k

点赞数 4

分类专栏： React 文章标签： postcss 前端 javascript

本文链接：https://blog.csdn.net/qq_43616690/article/details/125764625

版权

React 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

近日学习，使用最新版本create-react-app下创建项目时，默认已经引入了postcss8，在对其进行配置postcss-px-to-viewport，打算适配移动端视口时，遇到了一些问题：

安装的 postcss-px-to-viewport 不适配最新版本的postcss8
报出如下问题：

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

解决方法：安装适配8的版本

yarn add postcss-px-to-viewport-8-plugin

craco官方给出的配置方式无法生效：
解决方法：在craco.config.js中的配置postcss插件处修改配置为如下

module.exports = {
  style: {
    postcss: {
      mode: "extends",
      loaderOptions: {
        postcssOptions: {
          ident: "postcss",
          plugins: [
            [
              "postcss-px-to-viewport-8-plugin",
              {
                viewportWidth: 375, // 设计稿的视口宽度
              },
            ],
          ],
        },
      },
    },
  },
};