Foundation 和 React Sass 集成

Question

我使用 create-react-app 包创建了一个 React 应用程序。我已经包含了允许我使用 Foundations 类系统的缩小 css。

现在我想自定义 Foundation 提供的样式。

我看到节点模块中有一个基础文件夹，其中包含必要的 _settings.scss、_gloabl.scss 和 foundation.scss 文件，但我认为我不应该将这些文件拉出并放入我的src 文件夹。

如何使用 React 应用程序设置我的文件夹结构，该应用程序利用 Foundations Sass 库为我提供自定义功能？

谢谢！

Answer 1

理想情况下，您希望将该 _settings.scss 文件复制到您的 sass 架构中。复制完成后，随意编辑。

然后在主编译文件中的基础组件之前导入该设置文件，以便它们使用这些设置。这是我过去编写的一些代码的示例。

// Reset css.
@import "../../../bower_components/foundation/scss/normalize";

// This is the file you created for foundation settings. 
// Now all the imported foundation components will use these settings.
@import "./base/settings";

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import "../../../bower_components/foundation/scss/foundation/components/grid";
@import "../../../bower_components/foundation/scss/foundation/components/accordion";
@import "../../../bower_components/foundation/scss/foundation/components/alert-boxes";
@import "../../../bower_components/foundation/scss/foundation/components/block-grid";
@import "../../../bower_components/foundation/scss/foundation/components/buttons";
@import "../../../bower_components/foundation/scss/foundation/components/clearing";
@import "../../../bower_components/foundation/scss/foundation/components/dropdown";
@import "../../../bower_components/foundation/scss/foundation/components/dropdown-buttons";
@import "../../../bower_components/foundation/scss/foundation/components/forms";
@import "../../../bower_components/foundation/scss/foundation/components/inline-lists";
@import "../../../bower_components/foundation/scss/foundation/components/labels";
@import "../../../bower_components/foundation/scss/foundation/components/pagination";
@import "../../../bower_components/foundation/scss/foundation/components/progress-bars";
@import "../../../bower_components/foundation/scss/foundation/components/range-slider";
@import "../../../bower_components/foundation/scss/foundation/components/reveal";
@import "../../../bower_components/foundation/scss/foundation/components/split-buttons";
@import "../../../bower_components/foundation/scss/foundation/components/switches";
@import "../../../bower_components/foundation/scss/foundation/components/tables";
@import "../../../bower_components/foundation/scss/foundation/components/tooltips";
@import "../../../bower_components/foundation/scss/foundation/components/type";
@import "../../../bower_components/foundation/scss/foundation/components/visibility";