使用 PostCSS 和 TailwindCSS 构建 Gatsby 站点时出错

Posted 2023-03-07

【中文标题】使用 PostCSS 和 TailwindCSS 构建 Gatsby 站点时出错

【英文标题】：Error Building Gatsby Site with PostCSS and TailwindCSS

【发布时间】：2021-10-13 08:29:39

【问题描述】：

我可能是这个编码世界的一年级学生，所以如果这个问题的解决方案很明显，请饶了我。

我正在使用 TailwindCSS 创建一个 Gatsby 站点，并在观看 YouTube 视频后设置了它。在我整个 02 周的开发模式下，一切都运行良好。

我已经使用 Contentful、PostCSS 和其他标准图像、头部和清单插件设置了 Gatsby 项目。

我按照指南 https://medium.com/@mikeeeeeeey/create-react-app-tailwind-css-feat-postcss-631d9e33ba8c 在我的 gatsby 项目中使用 JIT 和 Purge 设置顺风。

供参考，这是 Tailwind 配置文件

  mode: 'jit',
  purge: ['./src/**/*.js,jsx,ts,tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: 
        colors: 
          blue: 
            50: '#EDFAFD',
            100: '#CAF0F8',
            200: '#ADE8F4',
            300: '#90E0EF',
            400: '#48CAE4',
            500: '#00B4D8',
            600: '#0096C7',
            700: '#0077B6',
            800: '#023E8A',
            900: '#03045E',
          ,
        ,
      ringWidth: ['hover', 'active', 'focus'],
      fontFamily: 
        'sans': ['Inter'],
        'mono': ['Roboto Mono'],
      ,
      
    ,
  ,
  variants: 
    extend: 
      fill: ['hover', 'focus'],
      stroke: ['hover', 'focus'],
      fontWeight: ['hover', 'focus', 'active'],
      textColor: ['hover', 'focus', 'active'],
      ringWidth: ['hover', 'active'],
    ,
  ,
  plugins: [],

这是我的 PostCSS 配置文件

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

包.json

  "name": "kabira-mobility",
  "version": "1.0.0",
  "private": true,
  "description": "Kabira Mobility",
  "author": "sagarsiwach",
  "keywords": [
    "gatsby"
  ],
  "scripts": 
    "build:css": "postcss src/styles/styles.css -o src/index.css",
    "watch:css": "postcss src/styles/styles.css -o src/index.css -w",
    "develop": "npm run watch:css & gatsby develop",
    "start": "npm run watch:css & gatsby develop",
    "build": "npm run build:css && gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  ,
  "dependencies": 
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.3",
    "@react-google-maps/api": "^2.2.0",
    "gatsby": "^3.11.0",
    "gatsby-plugin-gatsby-cloud": "^2.11.0",
    "gatsby-plugin-image": "^1.11.0",
    "gatsby-plugin-postcss": "^4.11.0",
    "gatsby-source-contentful": "^5.11.0",
    "gatsby-transformer-sharp": "^3.11.0",
    "postcss": "^8.3.6",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "swiper": "^6.8.1"
  ,
  "devDependencies": 
    "autoprefixer": "^10.3.1",
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  

最后是我的 gatsby 配置

module.exports = 
  siteMetadata: 
    siteUrl: "https://www.yourdomain.tld",
    title: "Kabira Mobility",
  ,
  plugins: [
    
      resolve: "gatsby-source-contentful",
      options: 
        accessToken: "#######MY Contentful Access Token########",
        spaceId: "#####My Contentful SpaceID######",
      ,
    ,
    "gatsby-plugin-postcss",
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
    "gatsby-plugin-gatsby-cloud",
  ],
;

此设置在开发模式下运行良好。但是，现在我处于构建阶段但面临以下问题

warn warn - You have enabled the JIT engine which is currently in preview.
warn warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
⠙ Building production javascript and CSS bundles
/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

DataCloneError: function destructLexErrorInfo() 
          // remove cyclic references added to error info:
          // info....<omitted>...  could not be cloned.
    at reportError (/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/jest-worker/build/workers/threadChild.js:100:32)
    at reportClientError (/Users/sagarsiwach/Desktop/gatsby/kabira-august/node_modules/jest-worker/build/workers/threadChild.js:84:10)
Emitted 'error' event on Worker instance at:
    at Worker.[kOnErrorMessage] (node:internal/worker:297:10)
    at Worker.[kOnMessage] (node:internal/worker:308:37)
    at MessagePort.<anonymous> (node:internal/worker:211:57)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:461:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)
Sagars-MBP:kabira-august sagarsiwach$ 

我尝试用谷歌搜索，但没有得到任何可以解决此问题的答案。然后我尝试了以下解决方案

重新创建另一个 Gatsby 目录并手动复制粘贴文件并逐步安装依赖项。在这个 PostCSS 进程确定原因之前，一切正常。 这个过程做了两次，改了顺风安装方式，没有任何改错。

谁能帮我解决这个问题。

非常感谢陌生人看到这篇文章并提供解决方案

干杯！

【问题讨论】：

gatsby-plugin-postcss 存在一些问题。在您的 package.json 中将其版本降级为 4.10.0，然后运行 ​​npm install 。之后尝试重建您的项目。

【参考方案1】：

我认为您的 PostCSS 配置应该如下所示：

module.exports = () => (
  plugins: [require("tailwindcss")],
)

查看Tailwind + Gatsby 集成了解更多详情。