项目配置

nuxt@2 + Postcss@8

问题1:

WARN postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:

解决方法

npm uninstall -D postcss-px-to-viewport

npm install -D postcss-px-to-viewport-8-plugin

// 更改nuxt.config.js中的build配置
  build: {
    postcss: {
      // 使用px2vw插件
      // 添加插件名称作为键,参数作为值
      plugins: {
        "postcss-px-to-viewport-8-plugin": {
          unitToConvert: "px", // 默认值`px`,需要转换的单位
          viewportWidth: 1440, // 视窗的宽度,对应设计稿宽度
          viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置
          unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
          propList: ["*"], // 转化为vw的属性列表
          viewportUnit: "vw", // 指定需要转换成视窗单位
          fontViewportUnit: "vw", // 字体使用的视窗单位
          selectorBlaskList: ["ignore-"], // 指定不需要转换为视窗单位的类,含有'ignore-'的类都不会被转换
          mediaQuery: false, // 允许在媒体查询中转换`px`
          minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
          replace: true, // 是否直接更换属性值而不添加备用属性
          exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件
          landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的单位
          landscapeWidth: 1338 // 横屏时使用的视窗宽度
        },
        tailwindcss:{},
        // autoprefixer: {}
      },
      preset: {
        // 更改postcss-preset-env 设置
        autoprefixer: {}
      }
    }
  },

问题2:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing.

解决方法

  1. 查看postcss-px-to-viewport-8-plugin包的package.json及README.md文件发现,该包需要postcss的版本为8+;
    在这里插入图片描述
  2. 另外,nuxt要求postcss的配置文件必须写在nuxt.config.js文件的build属性中,否则会有WARNING,因此不能新建postcss.config.js文件;
  3. 查看项目是否下载了@nuxt/postcss8,没有的话,将项目依赖中的postcss卸干净,之后:
npm install -D @nuxt/postcss8

// nuxt.config
export default {
  buildModules: [
    '@nuxt/postcss8'
  ]
}

即可解决。

附上我的package.json的最终版本号
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐