Question

上下文：我正在使用AngularDart和sass_builder开发一个Web应用程序，我想知道默认情况下如何将样式应用于某些Angular组件。

.
├── lib
|   └── src
|       ├── component
|           └── component.scss
|       └── utils
|           └── _basic_hosts.scss
├── web/scss
|   ├── variables.scss
|   ├── theme.scss
|   └── index.html

_basic_host.scss文件具有以下代码：

:host{
margin-right: $margin-horizontal;
margin-left: $margin-horizontal;
background-color: antiquewhite;
}

然后，在component.scss文件中，我要应用basic_host样式：

@import "../utils/basic_hosts";
:host{
display: block;
min-height: 80vh;
}

variables.scss文件包含我在_basic_hosts.scss中使用的$ margin-horizontal变量而且theme.scss文件具有以下代码：

 @import "variables";
@import "package:bootstrap_sass/scss/bootstrap";

body{
    font-family: 'Open Sans', sans-serif;
    background-color: $background-color;
    color: $text-color;
    background-image: url(../images/stars-opacity.0979c1.svg);
}

.loading-screen{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    .spinner-border{
        width: 3rem;
        height: 3rem;
    }
}

但是编译失败：

sass_builder:sass_builder on lib/src/myself/myself_component.scss: Error: Undefined variable.
  ╷
2 │     margin-right: $margin-horizontal;
  │                   ^^^^^^^^^^^^^^^^^^

因此，我知道如何通过其他方式获得相同的结果，但我真诚地想了解为什么它不起作用。我可以假设sass_builder首先执行组件样式文件，然后再执行theme.scss？

如何在Sass的Angular的组件样式文件中使用变量？

0 个答案: