仅在模式 (JIT) 和 POSTCSS 设置无法在 Gatsby 中编译

Posted 2023-03-06

【中文标题】仅在模式 (JIT) 和 POSTCSS 设置无法在 Gatsby 中编译

【英文标题】：Just in mode (JIT) and POSTCSS setup not compile in Gatsby

【发布时间】：2022-01-14 19:30:45

【问题描述】：

我也想在我的顺风中使用时间模式，用 postcss 设置 gatsby。

当我运行gatsby develop 时，它会给我以下错误。

我需要单独的 webpack 文件吗？我在这方面很新，所以不知道。

Generating development javascript bundle failed

Module build failed (from ./node_modules/gatsby-plugin-postcss/node_modules/postcss-loader/dist/cjs.js):

TypeError: Cannot read property 'enabled' of undefined```

Below are my config files.

`package.json`
```"@fontsource/poppins": "^4.5.0",
"@tailwindcss/aspect-ratio": "^0.3.0",
"autoprefixer": "^10.4.0",
"gatsby": "^4.2.0",
"gatsby-plugin-image": "^2.2.0",
"gatsby-plugin-postcss": "^5.2.0",
"gatsby-plugin-react-svg": "^3.1.0",
"gatsby-plugin-scroll-reveal": "0.0.7",
"gatsby-plugin-sharp": "^4.2.0",
"gatsby-source-filesystem": "^4.2.0",
"gatsby-transformer-sharp": "^4.2.0",
"postcss": "^8.3.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-html-parser": "^2.0.2",
"react-rotating-text": "^1.4.1",
"tailwindcss": "^2.2.19"```


Postcss.config.js

```module.exports = 
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
```

【参考方案1】：

我不确定这是否是问题中的拼写错误，但 Postcss.config.js 应该命名为 postcss.config.js。

我建议使用：

npx tailwindcss init -p

分别直接创建postcss.config.js和tailwind.config.js。

您的最终配置文件应如下所示：

// tailwind.config.js
module.exports = 
  content: [
    "./src/**/*.js,jsx,ts,tsx",
  ],
  theme: 
    extend: ,
  ,
  plugins: [],

还有：

// postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = 
    plugins: [
        require('tailwindcss'), 
        require('autoprefixer'),
    ],
;

npm 命令：

"build": "npm run build:css && gatsby build",
"develop": "npm run watch:css & gatsby develop",

假设您已经在gatsby-config.js 中设置了gatsby-plugin-postcss。

我需要单独的 webpack 文件吗？

Gatsby 提供了它自己的 webpack 配置，所以如果你需要自定义它，你 can add your own to override the default one。在这种情况下（使用 Tailwind + PostCSS）根本不需要。

缺乏实施细节，但我建议阅读以下内容：

https://madsbrodt.com/blog/tailwind-with-gatsby/ https://medium.com/@mikeeeeeeey/create-react-app-tailwind-css-feat-postcss-631d9e33ba8c How to get Tailwind.css working with Gatsby.js?