javascript - Next.js 中如何添加Postcss插件
问题描述:
因为制作的网站要兼容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' } } } })
不知道问题出在哪里了
第 1 个答案:
遇到了类似的问题,我尝试把next.config.js
随意编辑一次然后执行npm run dev
就能生效 ?♀️
前端 - echarts折线实现 新增删除 分段功能?:echarts折线实现 新增删除分段功能?如下图: