javascript - 基于 React JS 组件的样式

标签 javascript css reactjs sass

我有这个问题,我的所有全局变量都有这些 scss 文件:

colors.scss
fonts.scss
helpers.scss

我的组件有这些 scss 文件,并将其导入到 .jsx 文件之上:

header.scss
footer.scss
searchbar.scss

我的所有基于组件的 scss 文件中的问题,我需要以这种方式导入 color.scss 和 helpers.scss,它将多次包含在 header.scss、footer.scss 和 searchbar.scss 中

你们是如何解决这个问题的,已经搜索了一个小时,但没有找到任何解决方案。

谢谢!

最佳答案

只需制作一个 app.scss 文件并将所有 scss 文件导入到该文件中,并以您的变量文件开头。

我们在工作中做了类似的事情,我们有一个文件,我们将所有组件 scss 文件导入到其中,并且任何共享的依赖项都高于那些你只需要导入一次的依赖项。主要是确保有依赖的文件在依赖文件下面。

关于javascript - 基于 React JS 组件的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39438804/

相关文章:

javascript - 使用计算字段 react 状态

javascript - 是否可以覆盖javascript中的未定义?

Javascript - 在同一个 JSON 字符串中打包父项和子项的属性

javascript - rc-calendar 显示内部 react 组件

javascript - 如何在 React 中呈现未定义状态的数据?

reactjs - 过滤简单的平面列表

javascript - 如何在 Framework7 中移动到另一个页面(导出变量)?

javascript - Rails 应用程序中的 Jquery altFormat datepicker 问题

css - webkit float 显示

javascript - 使用第 3 方插件时包裹 child