将外部样式导入 scss 主页

Question

我有一个 main.scss 文件，我想从 _colors 文件中导入颜色。 我在颜色文件中定义了一个主体颜色，当我尝试导入它时，我看到网页没有任何变化。它们都在同一个 scss 文件夹中，但 @include 或 @import 似乎都没有区别。我尝试过在我的导入语句中使用和不使用下划线，单引号和双引号以及导入和包含关键字。请告诉我我犯了什么愚蠢的错误可以纠正这个问题，因为我已经研究了这个问题并认为我已经能够复制示例但没有成功。

 _colors.scss

body {
  $background-color: maroon;
}

    main.scss

@include 'colors';
 

Answer 1

部分与@use 指令一起使用。那么，

_colours.scss

body{
    background-color: maroon;
}

style.scss

@use "_colours";

代码的重用是通过@mixin 指令完成的。

_colours.scss

@mixin body--background{
    background-color:maroon;
}

style.scss

@use "_colours.scss" as so;

body{
    @include so.body--background;
}

但是，如果您只想定义颜色，请改用变量。下面的例子，

_colours.scss

$maroon=maroon;
$lightblue=//et cetera.

style.scss

@use "_colours";

body{
   background-color:$maroon;
}

Answer 2

如果您有一个 main.scss 文件，该文件将被编译，并且您想从另一个部分文件（例如 _colors.scss）导入变量、mixins 等。您可以通过使用@use 规则将部分_colors.scss 中的成员加载到main.scss 中来实现。这允许从模块中加载的成员在您的 main.scss 样式表中使用点符号进行引用。

假设您的_colors.scss 文件如下所示：

$bodyColor: maroon;
$someOtherColor: #f06;

/* adding a mixin for demo */
@mixin highlight($c, $bg) {
  color: $c;
  background: $bg;
}

/* some extra styles pertaining to _color.scss */
.some-styles { 
  color: $someOtherColor; 
}

注意：@use 的语法是 @use <url> as <namespace>;。

您可以使用 @use 规则将变量/混合等加载到 main.scss 中，并在整个程序中引用命名空间：

@use "./colors" as c;

body {
 background-color: c.$bodyColor;
}

.highlighted {
  @include c.highlight(#fff, #f06); 
}

或者不定义命名空间，例如：

@use "./colors" as *;

body {
 background-color: $bodyColor;
}

.highlighted {
  @include highlight(#fff, #f06); 
}

您当然可以在_colors.scss 中包含body {} 声明并以与上述相同的方式加载它，但我认为您希望将body 样式块放在main.scss 中并简单地引用来自@ 的加载变量987654342@。如果您有一个包含许多部分的目录并且想要将它们加载到 main.scss 而不为每个加载编写单独的 @use 规则，那么引入带有 @forward 规则的 index file 以将部分的整个目录加载到 main.scss使用单个 @use 规则。