问题标签 [craco]

我们有一个 create-react-app，它使用react-frame-component来渲染页面的一部分，完全独立于页面的其余部分。

我们一直在框架内使用 css 文件将样式应用于组件。这可以通过向 Frame-component 提供带有 css 文件的 -tags 的 initialContent-property 来完成，如下所示（取自https://github.com/ryanseddon/react-frame-component/issues/74#issuecomment- 347710246 )

现在我们也希望能够使用 scss 文件。

问题是在应用程序中导入 scss 文件时，它们将应用于父框架而不是内部框架（当然），无论您在哪个组件中导入它们。

所以我们需要一种方法来触发 scss 文件的编译并获取返回的已编译 css 的路径，然后我们可以将其作为字符串提供给 Frame-component（就像我们已经使用 css-files 所做的那样） .

我们已经在使用 craco 来覆盖一些 cra-config。

所以我考虑为某些后缀的 scss 文件应用一个 scss 编译器和一个文件加载器。

这是我的 craco.config.js：

文件在

它是这样包含的：

但我不断得到

在样式化的组件中引用另一个组件时，我收到此错误

ReferenceError：初始化之前无法访问“SiteHeader”

这是代码

我使用 create-react-app 作为脚手架，使用 tsconfig-paths 作为我的 tsconfig 的扩展，因为 create-react-app 在运行时会删除我的路径。我已经使用这个设置一年了，我对它没有任何问题，但是最近当我从头开始创建一个项目时，它不再工作了

tsconfig.json：

tsconfig-paths.json：

脚本：

我正在尝试对接一个反应应用程序。因为我使用的是tailwindcss，所以它使用craco进行构建。它一直正常工作，直到今天构建开始为 CSS 文件抛出错误。

错误

我的 Dockerfile

该应用程序在 docker 外部正确构建。有什么办法可以解决这个问题，或者至少看看问题是什么？

谢谢

以下是我得到的错误。应用程序的前端是使用 CRA 构建的。后端使用 Laravel - Laravel Sanctum 和 Laravel Fortify 构建。我正在使用 craco 来构建应用程序。

错误：React Refresh 运行时不应包含在生产包中。

我有一个带有 Craco 的基本反应应用程序，用于支持 tailwindcss。我想要做的是从 main.mjs 文件中读取，但是当我尝试导入文件时，我遇到了一个找不到模块的 ts2307 错误。有没有办法让我的应用程序找到 *.mjs 文件？就像我尝试过浏览 craco 配置文档一样，但我一直错过我猜想的要点。

在 webpack 3 中，我使用了 moment-timezone-data-webpack-plugin来减小我的包大小并且效果很好。测试表明它显着减小了捆绑包的大小。我现在已经升级到 webpack 4 和 create-react-app 4，看起来像

1. 这个插件对总包大小没有影响
2. 分析捆绑包，moment-timezone 只需要大约 7k

据我所知，时刻时区在我的应用程序中运行正常，所以我很困惑。

Webpack 4 在减少包大小方面要好得多，但它无法知道我的应用程序需要哪些时区数据是运行时数据，所以我无法想象这如何成为答案的一部分。

我尝试自己在 create-react-app 中设置 JIT，但它似乎没有工作，因为样式没有更新。我正在使用 craco 使用 tailwind css 构建应用程序，并且还添加了 TAILWIND mode=WATCH，因为他们建议使其适用于大多数构建。这是我的配置：

tailwind.config.js

package.json 脚本

package.json devDependencies

如果我能找到任何方法来解决这个问题，我会很高兴。

我有一个反应应用程序，我想从第三方库导入一个 javascript 文件，但文件用 shebang 标记#!/usr/bin/env node。

我发现（例如，这里How to Configure Webpack with Shebang Loader to Ignore Hashbang Importing Cesium React Component into Typescript React Component）我可以通过覆盖 webpack 配置并添加新的加载器 shebang-loader 来加载文件（我也尝试过 shebang-loader2）但是仅建议使用 @craco/craco 在 react 应用程序中覆盖 webpack，因此我将其添加到 package.json 并尝试将加载程序添加到现有的 webpack-config.js。

我制作了这行代码。文件 craco.config.js：

};

它解决了shebang的问题并且它忽略了#!/usr/bin/env node但现在我仍然收到错误

看起来它不识别“使用严格”行。谁能提出一些建议应该是什么问题？

我想优化我拥有的一个使用 bootstrap-sass 的项目，本质上是将必要的引导文件导入到 sass 文件中，然后使用 CSS 模块将其导入到组件中。

如果我尝试将这种方法与 craco 一起使用，它会删除太多样式，因为 css 模块会混淆类的命名方式。这会导致重要的样式被删除。

如果我尝试使用这种方法，它不会删除任何内容并且文件保持不变。我从未使用过xxl媒体说明符，但它仍然在最后一个块中。

我想保留 create-react-app 而不是 do npm run eject，但我发现的所有解决方案都涉及使用 webpack，就像这样

有没有办法使用 purgecss 删除多余的引导代码，同时保留 create-react-app？还有哪些其他选项可以优化我的 CSS？