我的Bootcamp的一些学生遇到了一个问题,我无法以任何方式进行复制。
在Next.js项目中运行npm run dev ,他们出现了这个错误:
➜ rest-api git:(main) npm run dev
> rest-api@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /Users/flaviocopes/dev/bootcamp/rest-api/.env
wait - compiling...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module 'tailwindcss'
在最后一行tailwindcss ,但也出现了autoprefixer 。
或者,这个错误也是。Error: Your custom PostCSS configuration must export a plugins key.
这不是一个很有帮助的错误!
经过多次调试,问题的原因被发现了。
出现错误的项目并没有安装Tailwind CSS,但是在之前的几周,我们使用了Tailwind。
发生的情况是这样的。
他们在父文件夹里有一个postcss.config.js 文件。或者在他们路径中的另一个父文件夹中,而不仅仅是直接的父文件夹。也许是他们的主文件夹。
类似这样的东西:
module.exports = {
plugins: {
autoprefixer: {},
},
}
重要提示:在他们现在的项目中,没有配置PostCSS。
如果你安装了PostCSS,那就没有问题。只有当你在当前的项目根文件夹中没有postcss.config.js 。
但是Next.js的工具化看到父文件夹中有一个postcss.config.js 文件,并执行它。
引起了这个错误:
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
还有一件事!⚠️ ✋
在一月底,我将组织网络开发训练营。
这是一个为期10周的同学会在线课程,我将指导你成为一名Web开发人员。
这不仅仅是 "一个课程"。它是我每年组织一次的大型活动。
我们将从零开始,学习网络开发的基础知识,HTML,CSS,JavaScript,Tailwind,Node.js,然后我们将学习React,JSX,如何使用PostgreSQL,Astro,Next.js,Prisma等等
在前10周结束时,你将知道如何创建网站和网络应用程序,我将为你解锁Bootcamp的第二阶段:你将获得Bootcamp毕业生专属的大量项目,所以你可以按照我的指示建立像带有认证的私人区域,克隆Twitter YouTube Reddit等流行网站,创建电子商务网站,等等。
因为一旦你掌握了基础知识,你只能通过在真正的、令人兴奋的项目上工作来学习。