Create-react-app '编译失败。' 由于 css 导入

Question

这个错误无处不在，让我感到震惊。 每当我尝试导入 css 文件时，无论是完整文件还是作为模块，它都会出现。

例如

import "./index.css"

或者

import styles from "./button.module.css"

这可能是由于最新的 macOS beta 至少它似乎与它的发布同时发生。 我尝试从中回滚，但这没有用。

Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js?modules=true!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
CssSyntax error: Unknown word (1:1)

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css");
  3 | 
This error occurred during the build time and cannot be dismissed.

我试过手动添加 web 包，检查所有语法错误，重新安装整个 repo，返回几次提交等等。 似乎什么都做不了。 很高兴提供更多背景信息。

（我在 15 小时前发现另一个人在 SO 上提到了同样的问题，但他没有提供调试信息所以票被关闭了）。

注意：相同的代码库在我的 MacBook 上运行得很好，没有问题！

Answer 1

您的 npm 项目设置似乎已损坏。 当我们更频繁地将一个分支移动到另一个分支并且我们有时忘记执行npm install并继续在另一个具有新包的分支上工作而不执行 npm 安装时，这种类型的问题通常称为Failed to compile以及更多情况很难说在哪些情况下您的 npm 设置已损坏。

有几种方法可以解决这个问题。

第一种方式

• 删除node_modules目录和package-lock.json文件。
• 关闭编辑器并再次打开它，在新终端中执行npm i 。 然后检查它是否被编译。

如果那不起作用，请按照第二种方式进行。

第二种方式

强制清除项目设置的 npm 缓存。

npm cache clear -f

然后重启系统关闭这个session的所有节点服务，重启后执行npm i再检查。

如果那不起作用，那么按照我认为编译失败问题很容易解决的第三种方法。

第三种方式

只需在另一个目录中再次克隆您的项目并执行npm install 。

Answer 2

代码是对的。 代码可能没有问题。

下面提到的步骤可能会有所帮助：

1. 删除node_modules文件夹。
2. 运行npm install
3. 运行npm cache clean -f （先尝试不使用-f ）

*前两个步骤对我有用。

Answer 3

你能试试这个吗？

删除这些文件夹： node_modules和package-lock.json 。 （如果有缓存文件夹也可以删除）

运行此命令：

配纱： yarn

用 npm: npm install

您也可以尝试更改您的导入方法：

import * as styles from...

这可能会有所帮助！