如何避免在 index.html 文件中单独添加 react-toolbox css

Question

我在我的 UI 中使用 react-toolbox，我的构建工具是 webpack。我已将 webpack 配置为在我的 dist 目录中生成样式文件 - react-toolbox.css。此文件包含我的应用程序中的 react-toolbox 组件使用的 CSS 类的定义。在我的index.html 中，这个 CSS 文件被添加为外部链接。我的应用程序样式（我为应用程序中的非 react-toolbox 组件编写的样式）在我的 app.js 文件中是 required，并使用 less-loader 加载。目前我的应用运行良好。

• 下载app.js以提供应用脚本和应用样式
• 下载react-toolbox.css 为 react-toolbox 组件提供样式

我想知道是否有办法将 react-toolbox.css 的内容与我的样式合并，并需要 app.js 中的结果 css，从而无需单独的 react-toolbox.css

Answer 1

根据文档你可以

捆绑的组件

您从索引文件中导入，因此导入的组件附带 所有依赖项和主题都已经需要并为您注入。 这意味着每个依赖项的 CSS 将捆绑在您的 最终的 CSS 自动和组件标记包括 要样式化的类名。例如：

import { AppBar } from 'react-toolbox/lib/app_bar';

而不是

import { AppBar } from 'react-toolbox/lib/app_bar/AppBar.js';