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

Question

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

pic左边是.scss代码，右边是对应的.css代码

Answer 1

如果你有三个文件：

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

Answer 2

您是否也尝试过@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