将公用文件夹中的 css 导入任何反应组件答案

【问题标题】：import css from public folder to any react component将公用文件夹中的 css 导入任何反应组件
【发布时间】：2021-05-28 13:41:11
【问题描述】：

我正在整合内容构建器的 react 包。

有很多文件需要保存在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 文件导入任何组件。

谢谢

【问题讨论】：

你是否正确设置了 webpack 配置？如果没有，请参考webpack.js.org/loaders/css-loader/…

标签： javascript reactjs

【解决方案1】：

你可以使用标签在你的 React 应用中包含一个 css 文件。

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

很遗憾，我们无法将公共文件夹中的 css 文件导入 JavaScript 文件（React 组件）。

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

import './style.css';

【讨论】：

正如我所说的已经尝试过了，但是这个 css 已经与其他文件内部链接，所以它不起作用

【解决方案2】：

在你的 react 应用中本地编写 css 样式？

【讨论】：

【解决方案3】：

您可以在侧组件的渲染函数中使用<link /> 标签：

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

    ...
</>
)

【讨论】：