此项目设置使用 Webpack 处理所有资源。 Webpack 提供了一种自定义方式,可以将导入概念 “扩展” 到 JavaScript 之外。 要表明 JavaScript 文件依赖于某个 CSS 文件,你需要 在 JavaScript 文件中导入 CSS:
Button.css
------- - -------- ----- -
Button.js
------ ------ - --------- - ---- -------- ------ --------------- -- -- ------- --------- ------ ----- ------ ------- --------- - -------- - -- ---------- --- -- ------ ---- --------------------- - -
对于 React 来说,这不是所必需的,但很多人发现这个功能很方便。 你可以在这里了解这种方法的好处。但是你应该意识到,这使得你的代码很难以移植到除 Webpack 之外的其他构建工具和环境中。
在开发过程中,通过这种方式表达依赖关系,可以在编辑样式时会动态重新加载样式。 在生产中,所有 CSS 文件将连接到构建输出中的单独压缩的 .css
文件中。
如果你担心使用特定于 Webpack 的语义,可以将所有 CSS 放入 src/index.css
中。 他仍然会从 src/index.js
导入,但是如果稍后迁移到其他构建工具,则可以随时删除该导入。