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

qzlgjiam  于 2023-01-12  发布在  React
关注(0)|答案(2)|浏览(121)

我可能是这个编码世界的一年级学生,所以如果这个问题的解决方案是显而易见的,请原谅我。
我正在用TailwindCSS创建一个盖茨比网站,并在观看YouTube视频后设置了它。在开发模式下,我工作了整整2周,一切都很好。
我已经用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'),
    ],
};

Package.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"
  }
}

最后是我的盖茨比配置

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$

我试着在谷歌上搜索这个问题,但没有得到任何可以解决这个问题的答案。
1.重新创建另一个盖茨比目录和手工复制粘贴文件和安装依赖一步一步。所有工作正常,直到这个PostCSS进程,从而确定原因。
1.做了两次这个过程,并改变了顺风安装方法,没有任何变化的错误。
谁能帮我解决这个问题。
非常感谢善良的陌生人看这篇文章,并提供了一个解决方案
干杯!

ovfsdjhp

ovfsdjhp1#

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

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

查看Tailwind + Gatsby集成以了解更多详细信息。

xjreopfe

xjreopfe2#

不知何故,仅仅遵循official tailwind documentation并不起作用,我不得不使用下面的代码将postcss.config.js添加到项目的根目录。

module.exports = {
  plugins: {
  tailwindcss: {},
  autoprefixer: {},
 }
}
// These are the package versions
"gatsby": "^5.4.0"
"gatsby-plugin-postcss": "^6.4.0",
"postcss": "^8.4.21",
"autoprefixer": "^10.4.13",
"tailwindcss": "^3.2.4",

相关问题