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

项目配置

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的最终版本号
在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 你没有设置任何插件、解析器或字符串化器。现在,PostCSS 什么也不做。请在 https://www.postcss.parts/ 上为你的情况选择插件,并在 postcss.config.js 中使用它们。 ### 回答2: PostCSS是一个使用JavaScript插件来转换CSS的工具。当你安装并在项目中引用PostCSS时,如果你没有设置任何插件、解析器或字符串化器,那么PostCSS将无法进行任何操作。 为了使用PostCSS,你需要选择一些适合你项目的插件。你可以前往https://www.postcss.parts/ 来查找和挑选适合你项目的插件。这个网站上列出了各种各样的PostCSS插件,你可以通过关键字或类别来筛选插件。 一旦你选择了适合你的插件,你需要在postcss.config.js文件中配置它们。这个文件告诉PostCSS实际上加载哪些插件,以及如何使用它们。你可以使用如下代码示例来添加插件: ``` module.exports = { plugins: [ require('autoprefixer'), require('cssnano')({ preset: 'default', }), ], }; ``` 这个示例中添加了两个插件:Autoprefixer和CSSNano。 Autoprefixer可以自动添加CSS前缀,而CSSNano可以压缩CSS文件。你可以根据你的需求添加自己想要的插件。注意,其中很多插件是需要配置选项的,你需要查看插件的文档来了解它们的用法。 在使用PostCSS之前,一定要明确你所选择的插件能否解决你遇到的问题,以及它们是否与你的项目相容,这样能够确保你的CSS转换工作可以在良好的状态下顺利进行。 ### 回答3: 这段话意思是说使用PostCSS时,如果没有设置插件、解析器或字符串转换器,那么它将不起作用。为了使其运作,需要在postcss.config.js中选择适合当前情况的插件并使用它们。 PostCSS是一个非常有用的CSS处理工具。它可以优化、转换并提高CSS的代码质量。然而,它需要通过插件、解析器和字符串转换器来实现这些功能。如果在使用PostCSS时没有设置这些组件,则它将不会做任何事情。这意味着你不能通过PostCSS提供的优势来优化你的CSS代码。 在https://www.postcss.parts/中,有很多PostCSS插件可供选择。选择使用哪个取决于你想要实现什么目标。例如,如果你想要优化你的CSS代码,可以选择使用Autoprefixer插件。如果你想要使用一些新的CSS语法,可以选择使用CSSNext插件。可以在postcss.config.js文件中设置所需的插件,PostCSS将会非常适合你的CSS处理需求。 综上所述,如果想要使用PostCSS优化CSS代码,必须设置正确的插件、解析器和字符串转换器。当你正在使用PostCSS时,你需要了解它如何工作,以便更好地配置它。只要不断学习,并使用合适的插件,你可以轻松地提高你的CSS代码质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值