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

【问题标题】：Create-react-app 'Failed to compile.' due to css importCreate-react-app '编译失败。'由于 css 导入
【发布时间】：2021-06-24 07:05:33
【问题描述】：

突然出现，这个错误让我跺了跺脚。每当我尝试导入 css 文件时，无论是完整还是作为模块，它都会出现。

例如

import "./index.css"

或

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

这可能是由于最新的 macOS 测试版，至少它似乎与它的发布相吻合。我尝试从它回滚，但没有奏效。

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 pack，检查所有语法错误，重新安装整个 repo，返回几个提交等等。似乎什么都做不了。很高兴提供更多上下文。

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

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

【问题讨论】：

您是否尝试过删除 package-lock.json 并重新安装 npm？
你能显示你的 webpack 配置文件和你正在导入的 css 文件的内容吗？
我认为删除 package-lock 和 node_module 并重新安装依赖项可能会有所帮助。在 node-sass 版本之间切换时，我遇到了同样的错误。
您是否尝试过增加或减少 css-loader 版本？我想它可能会对你有所帮助。请用纱线安装所有东西

标签： reactjs webpack create-react-app

【解决方案1】：

代码是正确的。代码可能没有问题。

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

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

*前两个步骤对我有用。

【讨论】：

【解决方案2】：

您的 npm 项目设置似乎已损坏。这种被称为Failed to compile 的问题通常发生在我们更频繁地将一个分支移动到另一个分支并且我们有时忘记执行npm install 并继续在另一个具有新包的分支上工作而没有执行 npm install 和更多情况时这很难说在哪种情况下你的 npm 设置被破坏了。

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

第一种方式

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

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

第二种方式

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

npm cache clear -f

然后重新启动系统以关闭此会话的所有节点服务。重启后执行npm i 并再次检查。

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

第三条路

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

【讨论】：

【解决方案3】：

你可以试试这个吗？

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

? 运行以下命令：

带纱：yarn

使用 npm：npm install

?你也可以尝试改变你的导入方式：

import * as styles from ...

这可能会有所帮助！

【讨论】：