【发布时间】: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 项目中常见的工作流程。