找不到模塊“sanitize.css/page.css”

在構建 gatsby 專案時，我遇到了這種錯誤。

紗線開發

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Cannot find module 'sanitize.css/page.css'
Require stack:
- D:\UpworkJobs\Nate\dci-gatsby-importexport\node_modules\postcss-normalize\dist\index.cjs.js

File: src\css\preview.css

failed Building development bundle - 366.725s

這是錯誤日志的螢屏截圖。

即使我從樣式檔案中洗掉了所有 CSS 代碼，也會發生這些型別的錯誤。似乎匯入 CSS 檔案不起作用。如果我沒有匯入 CSS 檔案，錯誤就會消失。

這里是 gatsby-config.js 的所有代碼

let systemvars = false;
if (process.env.NODE_ENV === "production") {
  systemvars = true;
}
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
  systemvars
});
// Gatsby automatically sets NODE_ENV to `development` or `production` when running `gatsby develop` or `gatsby build`, respectively.
// Thus make sure you have .env.development or .env.production setup (unless your CI/build env vars are already set globally)

const AliasConfig = require("./alias.config.js");

module.exports = {
  siteMetadata: {
    title: `DCI DigiGuide Print`,
    description: `DCI DigiGuide Printable Version`,
    author: `@designbycosmic`,
    siteUrl: process.env.SITE_URL,
  },
  plugins: [
    //
    // * App Functionality Plugins
    //

    // eslint plugin
    {
      resolve: "gatsby-plugin-eslint",
      options: {
        test: /\.js$|\.jsx$/,
        exclude: /(node_modules|.cache|public)/,
        stages: ["develop"],
        options: {
          maxWarnings: undefined,
          emitWarning: true,
          failOnError: false,
          failOnWarning: false,
        },
      },
    },

    // allows content to be placed in head
    `gatsby-plugin-react-helmet`,
    // adds web manifest for some pwa functionality
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-dci-digiguide-print`,
        short_name: `DigiGuidePrint`,
        start_url: `/`,
        background_color: `#222c47`,
        theme_color: `#222c47`,
        display: `minimal-ui`,
        icon: `./src/images/favicon.png`, // This path is relative to the root of the site.
      },
    },
    // allow alias imports
    {
      resolve: "gatsby-plugin-alias-imports",
      options: {
        alias: AliasConfig.map,
        extensions: AliasConfig.extensions,
      },
    },
    // inline svgs instead of converting them to base64
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },
    `gatsby-plugin-postcss`,
    `gatsby-plugin-material-ui`,
    // Craft CMS configuration
    {
      resolve: `gatsby-source-graphql`,
      options: {
        url: process.env.CRAFT_API_URL,
        typeName: "Craft",
        fieldName: "craft",
        headers: {
          Authorization: `bearer ${process.env.CRAFT_API_TOKEN}`,
        },
      },
    },

    // Get build date
    {
      resolve: `gatsby-plugin-build-date`,
      options: {
        formatAsDateString: false,
      },
    },
  ],
};

幫我解決這個問題。

uj5u.com熱心網友回復：

終于，這個問題得到了解決。
使用 yarn 而不是使用 npm 解決了這個問題。
洗掉 node_modulesyarn install
之后，問題就消失了。
謝謝你。

uj5u.com熱心網友回復：

在我的情況下，我能夠通過在package.json.

"resolutions": {
  "sanitize.css": "12.0.1"
},

標籤：节点.js 网络包 盖茨比

上一篇：如何將React應用程式部署到網站一次而忘記它

下一篇：sass-loader給出“不允許按規則”的錯誤