构建生产 Javascript 和 CSS 包时 gatsby 构建失败答案

【问题标题】：gatsby build fails when building production Javascript and CSS bundles构建生产 Javascript 和 CSS 包时 gatsby 构建失败
【发布时间】：2021-10-31 08:57:26
【问题描述】：

gatsby 构建过程最近开始在我的项目中失败，并出现以下错误消息：

这是一个具有多个依赖项的大型项目，几天前才开始收到此构建错误，而不是在任何重大代码更改或添加新包之后。我尝试恢复到之前的提交但没有成功，还尝试升级项目的所有依赖项（也没有成功）。

我没有发现其他问题/问题对解决这个问题有很大帮助。

任何解决方案的想法将不胜感激

package.json 中的依赖项：

 "dependencies": {
    "@fontsource/bebas-neue": "^4.5.0",
    "@fontsource/open-sans": "^4.5.0",
    "@fontsource/roboto": "^4.5.0",
    "@fontsource/work-sans": "^4.5.0",
    "@storybook/addon-docs": "^6.3.0-rc.5",
    "@storybook/addon-postcss": "^2.0.0",
    "gatsby": "^3.6.2",
    "gatsby-plugin-breadcrumb": "^12.1.1",
    "gatsby-plugin-gatsby-cloud": "^2.7.0",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-image": "^1.8.0",
    "gatsby-plugin-manifest": "^3.8.0",
    "gatsby-plugin-react-helmet": "^4.8.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-remove-trailing-slashes": "^3.11.0",
    "gatsby-plugin-sass": "^4.7.1",
    "gatsby-plugin-sharp": "^3.8.0",
    "gatsby-source-filesystem": "^3.8.0",
    "gatsby-transformer-json": "^3.9.0",
    "gatsby-transformer-sharp": "^3.8.0",
    "node-sass": "^6.0.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-focus-lock": "^2.5.2",
    "react-helmet": "^6.1.0",
    "react-slick": "^0.28.1",
    "react-use": "^17.2.4",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.0",
    "util": "^0.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@storybook/addon-a11y": "^6.3.7",
    "@storybook/addon-actions": "^6.3.0-rc.5",
    "@storybook/addon-essentials": "^6.3.0-rc.5",
    "@storybook/addon-links": "^6.3.0-rc.5",
    "@storybook/builder-webpack5": "^6.3.0-rc.5",
    "@storybook/manager-webpack5": "^6.3.0-rc.5",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.3.0-rc.5",
    "babel-loader": "^8.2.2",
    "babel-preset-react-app": "^10.0.0",
    "css-loader": "^5.2.6",
    "path-browserify": "^0.0.1",
    "prettier": "^2.3.2",
    "sass-loader": "^12.1.0",
    "storybook-addon-designs": "^6.0.0",
    "storybook-addon-pseudo-states": "^1.0.0",
    "style-loader": "^2.0.0"
  }

gatsby-config 中的插件：

  plugins: [
    `gatsby-plugin-breadcrumb`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `icons`,
        path: `${__dirname}/src/assets/icons/`,
      },
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },

【问题讨论】：

这是构建react项目过程中的问题吗？
构建一个gatsbyjs项目，也是使用storybook/react
您是否在每次试用中删除了锁定的依赖项？
是的，我的过程通常是删除node_modules文件夹和锁定文件，然后用yarn install重新安装。接下来我运行gatsby clean 并尝试运行构建脚本（这导致了这个错误）

标签： build gatsby storybook build-dependencies gatsby-plugin

【解决方案1】：

在恢复很远并重新安装+重建每个提交之后，我发现这行 scss 是罪魁祸首：

@media (max-width: $small) {
                font-size: calc($ts-h2-sm - 4px);
                line-height: $text-lh-md;
            }

显然，如果没有Interpolation，你不能在 calc() 中使用 Sass 中的变量。

为了解决这个问题，我将font-size: calc($ts-h2-sm - 4px); 更改为font-size: calc(#{$ts-h2-sm} - 4px);

另一个参考：Sass variable in CSS calc() function

我不完全确定错误消息为什么会这样读取，但是更改这一行突然修复了我的构建。

【讨论】：