关于 SAP Spartacus feature library 里的 _index.scss 文件

JerryWang_汪子熙 - 2021-11-17 01:28:51

如下图所示：quick order 文件夹下存在一个 _index.scss 文件，其导入了 styles 文件夹下的 index：

然而，styles 文件夹下并没有 index.scss 文件，只有一个 _index.scss. 但是，ctrl + click 点击上图第一行代码后，会自动跳转到 styles 文件夹下的 _index.scss 文件：

查看这个 @import 的语法：

Sass 扩展了 CSS 的 @import 规则，能够导入 Sass 和 CSS 样式表，提供对 mixin、函数和变量的访问，并将多个样式表的 CSS 组合在一起。与需要浏览器在呈现页面时发出多个 HTTP 请求的普通 CSS 导入不同，Sass 导入完全在编译期间处理。

Sass 导入的语法与 CSS 导入相同，只是它们允许多个导入用逗号分隔，而不是要求每个导入都有自己的 @import。此外，在缩进语法中，导入的 URL 不需要引号。

考虑下列两个文件：

// 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';

注意语法，slash 后面，下划线和扩展名 .scss 自动消失。

当 Sass 导入一个文件时，该文件被评估，就好像它的内容直接出现在 @import 的位置。导入文件中的任何混入、函数和变量都可用，并且其所有 CSS 都包含在编写 @import 的确切位置。更重要的是，在@import 之前定义的任何mixin、函数或变量（包括来自其他@imports）都可以在导入的样式表中使用。

注意，需要小心重复导入问题：

如果多次导入相同的样式表，则每次都会重新评估。如果它只是定义了函数和 mixin，这通常没什么大不了的，但是如果它包含样式规则，它们将被多次编译为 CSS。

被导入 scss 文件的定位问题

为了确保样式表适用于每个操作系统，Sass 通过 URL 而不是文件路径导入文件。这意味着您需要使用正斜杠，而不是反斜杠，即使您使用的是 Windows。

注意：如下图所示：Windows10 使用的是反斜杠：