与 js“.sass 文件”共享 sass 变量答案

【问题标题】：sharing sass variables with js ".sass files"与 js“.sass 文件”共享 sass 变量
【发布时间】：2019-05-02 11:08:28
【问题描述】：

我在与 js 共享 sass 变量时遇到问题，我在我的项目中使用 Reactjs，我想共享一些与断点相关的 sass 变量以构建响应式组件。我看到我们可以在.scss 文件上使用:export{} 表达式共享变量我在.sass 文件上尝试了相同的表达式，但它不起作用。 .sass 文件中的 :eport{} 是否有任何等效语法？

谢谢

【问题讨论】：

为什么不使用css变量？
这个有用吗？ --- bluematador.com/blog/how-to-share-variables-between-js-and-sass
如果我是你，我会寻求一种解决方案，让你与 sass 共享 js 变量。
@ChristopherBennett 我看到了这个解决方案，但我的问题是.sass 文件而不是.scss“缩进语法”。 :export{} 关键字不适用于 .sass 文件
@xianshenglu 这将导致项目文件结构不一致，所有文件都是.sass文件，我不想直接使用CSS

标签： javascript css reactjs webpack sass

【解决方案1】：

我可以建议将您的变量放在 JSON 文件中，然后您可以通过设置 JSON Importer 将它们导入您的 SCSS 文件。

在 JSON 文件中定义的相同变量可以导入到任何其他 JS 文件中。

尽管如此，我也可以建议将所有SCSS内容复制到styled-components文件中，这样你就可以解决两个独立世界无法相互通信的问题了。

我一直在使用样式化组件（在 React 应用程序中）并取得了巨大成功，我推荐这种方法。

【讨论】：

我不喜欢你建议的那个工具，它要求你以特定的方式格式化你的 JSON（如果你不能可靠地使用有效的 JSON 有什么意义？），而不是查看 github.com/sasstools/json-importer 或我的你推荐的工具的分支github.com/One-Nexus/sass-json-importer
@ESR - 以特定方式格式化是什么意思？ README 示例看起来像普通的 JSON。无论如何，您建议的 repos 看起来非常不错，感谢您将其添加到讨论中
编译器可以用有效的 JSON 中断就是我的意思 - 有效的 JSON 永远不应该破坏编译器。阅读文档以获取更多信息。