在另一个`.scss`文件中包含`.scss`文件？

Question

我怎样才能将.scss文件包含在另一个.scss文件中？我试图在一个文件中写这个:app.scss:

@include('buttons');
@include('dropzone');

body {

    background: $primaryColor;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;
} /* more css code here */

它会返回一个错误: invalid css after @import

我尝试在主scss文件中包含2个其他scss 文件,因此它css最终将被编译为一个文件.这怎么可能？

Answer 1

你可以像这样导入它;

@import "../../_variables";

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

根据你的目录,它会做你想要的.

Answer 2

您可以使用@use规则。此规则将另一个 Sass 文件作为模块加载，这意味着您可以使用基于文件名的命名空间来引用 Sass 文件中的变量、混合和函数。使用文件还将在编译输出中包含它生成的 CSS！

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

看看如何使用@use 'base'；在styles.scss文件中

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

您不需要包含文件扩展名。

Answer 3

您可以通过执行以下操作来包含部分:

@import "partial";

导入的文件需要一个下划线,因此sass会识别它包含在内:_partial.scss