我克隆了这个存储库https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs,然后更新了tailwind.config.js
theme: {
extend: {
color: {
primary: "#730000",
secondry: "#efefef",
},
},
},
variants: {},
plugins: [],
};
然后运行命令postcss css/tailwind.css -o generated.css
终端抛出错误TypeError: Invalid PostCSS Plugin found at: plugins[0]
任何人都可以请帮助我修复它.谢谢
6条答案
按热度按时间oxalkeyp1#
改变了这一
到
解决了
TypeError:在以下位置找到了无效的PostCSS插件:插件[0]
0ejtzxu12#
相同的错误,可能与OP不同的问题
我在尝试将Storybook与Tailwind和Nextjs一起安装时遇到了这个问题。在将
"tailwindcss": {},
添加到postcss.config.js
后,我能够修复此错误。需要说明的是,我没有也没有像你一样经历过这个问题,没有尝试将故事书添加到工作流程中。
我的解决方案的工作配置文件
下面是postcss,tailwind,storybook的工作配置,使用Nextjs的默认值。我使用的是标准的
create-next-app
工作流程,并基于--example with-storybook
。特别是,下面所有的文件都放在我的项目根目录下,我使用的是storybook >= 6.0.0。
请参阅Next.js documentation,* 靠近注解部分的底部 *,其中强调了在添加非Next.js工具(如故事书)时,配置文件中需要对象语法。
postcss.config.js
tailwind.config.js
.storybook/main.js
.storybook/preview.js
其中
index.css
是通过Tailwindcss文档指示的。r6vfmomb3#
检查您安装的autoprefixer版本。我花了一两个小时才意识到,autoprefixer 10版在使用nextjs+tailwindcss(特别是我这边的next css-loader)时确实引起了突破性的变化。暂时回滚到email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),直到这些bug得到解决。如果使用yarn,也要确保你没有使用email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)。使用email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)或email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)。我提到它的原因是,如果没有明确的版本与yarn冲突,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)会自动安装。值得庆幸的是,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)应该很快就会以@9.5.4的版本发布,他们将开始在@9.5.5-canary.x上工作
Autoprefixer大约5天前发布了版本10。他们将postcss迁移到了peerecommendencies,并迁移到了PostCSS 8。他们还删除了对Node 6.x、8.x和11.x版本的支持。也就是说,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)应该可以做到这一点。
我在postcss/autoprefixer的一个开放问题上留下了评论,概述了我在nextjs https://github.com/postcss/autoprefixer/issues/1359#issuecomment-695752807中使用版本10时遇到的错误。
p5fdfcr14#
请尝试将postcss-css沿着与postcss、tailwindcss和autoprefixer一起更新到它们的最新版本。
在ReactJS中工作-“^16.13.1”
postcss.js
3hvapo4f5#
更新postcss-fixer(10.0.0v)和autoprefixer(10.4.8v)到最新,然后在
postcss.config.js
文件中添加require("postcss-import")
解决了我的问题。npm i postcss-cli@latest autoprefixer@latest
postcss.config.js
:qcuzuvrc6#
这对我很有用谢谢
更新了postcss-import(10.0.0v)和autoprefixer(10.4.8v)到最新版本,然后在postcss.js.js文件中添加了require(“postcss-import”),为我解决了这个问题。