Next.js 中如何添加Postcss插件

Question

因为制作的网站要兼容IE9，因为需要让IE9支持css中的flex功能，使用了flexibility来处理，于是需要用到postcss-flexibility这个postcss插件来处理样式文件，但是怎么弄都不生效。

我按照了官网的写法，在文件目录下新增了 postcss.config.json 可是没有效果。

如果有效果的话样式中 dispaly: flex； 的地方会插入 -js-dispaly:flex; 这样一句

{
  "plugins": [
    "postcss-flexibility", // 这句是新增的
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

于是我在 next.config.js 中加入

  build: {
    postcss: {
      plugins:[
        require('postcss-flexibility')({})
      ]
    },
  }

打包后也发现没有效果，后面还尝试了,也没有效果

 build: {
    postcss:[require('postcss-flexibility')]
 }
 

这是我的 next.config.js 全部内容

const path = require('path')
const withLess = require('@zeit/next-less')
const withCss = require('@zeit/next-css')
const withSvgr = require("next-svgr");
const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const modifyVars = require('./public/styleVariables')

// less 配置
const lessOption = {
  paths:[
    path.join(__dirname,'/src')
  ],
  modifyVars:modifyVars,
}

// 合并插件配置
module.exports = withPlugins([
    // 解析css
    withCss(),
    // 解析less
    [withLess,{ cssModules: true, lessLoaderOptions:lessOption }],
    // 支持svg
    withSvgr,
    // // 在less中支持引用资源
    // withImages,
],{
  // 自定义构建目录
  // index首页文件在 pages/
  exportPathMap: async function(){
    return {
      '/':{ page:'/index' },
      '/adviser/adviser':{ page:'/adviser' },
      '/agent/agent':{ page:'/agent' },
      '/douyin/douyin':{  page:'/douyin' },
      '/zhihu/zhihu':{ page:'/zhihu' }
    }
  }
})

不知道问题出在哪里了

Answer 1

遇到了类似的问题，我尝试把next.config.js随意编辑一次然后执行npm run dev就能生效 🤷‍♀️