【问题标题】:Importing a CSS file to a react app in the head将 CSS 文件导入头部的反应应用程序
【发布时间】:2017-11-01 08:30:48
【问题描述】:

我想将 链接 添加到我的 HTML 头中的 CSS 文件中 - 就这么简单。我不希望将 CSS 内嵌到 HTML 中,因为这看起来很糟糕。

我已经创建了一堆样式,我想在全球范围内应用到我的 React 应用程序 - 所以这似乎是一件明智的事情。

我正在尝试导入我的样式;

import './css/main.css';

当我这样做时,react 会将我的 CSS 作为内联样式添加到我的 HTML 的头部.. 所以实际上应用程序可以工作并且看起来正确,但这看起来很混乱而且完全错误 - 我宁愿直接链接到 CSS 文件.

我确实找到了 similar question,关于如何将 CSS 添加到 React 组件而不是整个应用程序头部。

希望这很清楚,如果有人可以向我指出一些文档或解释我做错了什么,将不胜感激。

【问题讨论】:

  • 如果你想以非 React 的方式呈现你的 CSS,那么你应该公开 CSS 文件并像普通文件一样加载它。
  • “这看起来很乱,完全是错误的”根本不是真的。将 css 合并到一个 js 文件中意味着您的应用程序将减少一个获取 css 的请求。根据您应用的大小,这可能会显着提升性能。
  • Hey Chase DeAnda - 我对那个声明并不完全清楚,我说的是把整个样式表作为一个内联元素转储出来,感觉很乱,而不是把 CSS 与 React / JSX 方式结合起来......我在我的问题中进一步解释了我遇到的错误,希望这是有道理的
  • 如果您不想在 HTML 文件中使用内联 CSS,请使用 extract-text-webpack-plugin 将导入的 CSS 规则提取到单独的文件中。这是 React 项目中常见的工作流程。

标签: css reactjs


【解决方案1】:

只需像往常一样在 HTML 文档的 HEAD 中抓取文件。例如

<link rel="stylesheet" href="/style/mystyle.css" />

【讨论】:

  • 好吧,是的,我认为在 React 之外添加指向 CSS 的链接似乎是我现在能看到的最佳解决方案 - 干杯!
猜你喜欢
  • 1970-01-01
  • 2017-12-17
  • 2021-09-03
  • 1970-01-01
  • 2018-07-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-30
相关资源
最近更新 更多