将 css 从 public 文件夹导入到任何 React 组件

Question

我正在努力集成内容生成器的反应包。

有很多文件需要保存在public文件夹中，然后在index.html文件中添加css和js的引用

<link href="/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
    <link href="/assets/ionicons/css/ionicons.min.css" rel="stylesheet">
    
    <script src="/contentbuilder/lang/en.js"></script>
 <script src="/assets/minimalist-blocks/content.js" type="text/javascript"></script>

现在 css 正在打破所有其他应用程序样式。

我想仅在需要包的组件中导入css文件，但由于我不知道如何从公共文件夹导入，所以我复制了上面的两个css文件并将其放入src文件夹中并导入。但 css 文件似乎正在使用其他一些 css 字体等，所以它无法工作...

任何人都可以指导我如何将 css 文件从公共文件夹导入到任何组件。

谢谢

Answer 1

您可以使用标签在 React 应用程序中包含 css 文件。

<link rel="stylesheet" href="%PUBLIC_URL%/style.css"  type = "text/css" />

不幸的是，我们无法将 css 文件从 public 文件夹导入到 JavaScript 文件（React 组件）中。

要在 React 组件中导入 css 文件，您必须将 style.css 文件移动到 src 文件夹，然后像这样在 App.js 中导入该文件

import './style.css';

Answer 2

检查您的后端如何处理请求

React Router 不能正常处理静态文件

检查应用程序是否在后端使用

Express

，并添加以下内容：

app.use(express.static('public'));

Answer 3

您可以在侧面组件的渲染函数中使用

<link />

标签：

return (
<>
    <link href="/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />

    ...
</>
)

Answer 4

在你的React应用程序中本地编写CSS样式？