找不到模块 'sanitize.css/page.css'

Question

在构建gatsby项目的时候遇到了这样的错误

yarn develop

 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,
      },
    },
  ],
};

帮我解决这个问题。

Answer 1

这个问题终于解决了。
使用 yarn 而不是使用 npm 解决了问题。
删除 node_modules 和 yarn install
之后，问题就消失了。
谢谢。

Answer 2

在我的例子中，我能够通过在 package.json 中添加以下配置来解决。

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

找不到模块 'sanitize.css/page.css'

Cannot find module 'sanitize.css/page.css'

node.js

webpack

gatsby