基础 scss 文件未在我的反应项目的 App.scss 文件中导入答案

【问题标题】：foundation scss file not getting imported in App.scss file in my react project基础 scss 文件未在我的反应项目的 App.scss 文件中导入
【发布时间】：2020-11-11 14:41:23
【问题描述】：

我使用 npm 安装了 zurb-foundation 并尝试将前者的 .scss 导入到我的 App.scss 文件中。我正在使用“实时 sass 服务器”将 .scss 代码编译为 .css 代码。虽然创建了 .css 文件，但即使我将 .scss 从基础导入到 App.scss，它也没有显示任何代码

pic shows the .scss code on the left and corresponding .css code on the right

【问题讨论】：

您必须使用导入而不是目录添加文件。
我不明白。请详细说明一下，我完全是菜鸟。据我了解，您一定是在建议我添加@import“文件位置”；在我的 App.scss 中。我已经做了，请看图片。
您必须实际导入/包含单个文件。您不能导入/包含整个目录/文件夹。有关工作设置，请参阅 github.com/foundation/foundation-zurb-template/blob/master/src/…。

标签： css reactjs npm sass zurb-foundation

【解决方案1】：

你也试过@import '../node_modules/foundation-sites/scss/foundation.scss'吗？

但也许你可以选择你真正需要使用的东西，例如你的 scss 的断点混合，比如：

@import "~foundation-sites/scss/util/util";
@import "~foundation-sites/scss/util/breakpoint";

否则整个基础代码将被编译到你的 css 文件中，也许你不需要所有的东西。

你也可以看看https://get.foundation/sites/docs/sass.html

【讨论】：

【解决方案2】：

如果你有三个文件：

SASS 语法

第一个文件：

SASS SYNTAX
// foundation/_code.sass
code
  padding: .25em
  line-height: 0

第二个文件：

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0

您可以像这样使用导入添加文件。

注意：文件名必须有这样的语法：

_{name of file}.sass

// app.sass
@import foundation/code, foundation/lists

SCSS 语法

第一个文件：

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

第二个文件：

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

第三个文件：

// style.scss
@import 'foundation/code', 'foundation/lists';

更多信息研究：sass docs @import

【讨论】：