Angular 7中的SCSS加载顺序

Question

全局样式进入“ src / styles.scss”，即styles.scss的内容：

// bs variables
@import '../src/assets/scss/variables';

// importing bootstrap
@import '~bootstrap/scss/bootstrap';

我在那里导入BS的“ _variables.scss”，然后在我的组件“登录”（login.component.scss）中，我尝试使用“ _variables.scss”中的变量，但不会看到此信息变量。

scss文件的加载顺序是多少？还是导入变量文件的正确位置是什么？

更新1

login.component.scss的内容：

#login {
  background-color: $blue;
}

更新2

正如@Drenai指出的关于assets目录的情况一样，我已将_variables.scss放在src/_variables.scss下，然后将其导入styles.scss中，但是变量在其中不起作用我的login.component.scss（如果我未明确将其导入那里）。但是，如果已经将其导入到login.component.scss中，为什么还要将其导入到styles.scss中呢？

更新3

刚刚发现的旧问题：https://github.com/angular/angular-cli/issues/3700 似乎没有其他方法，我们必须在每个组件中导入变量。或使用CSS变量。

Answer 1

最好有一个styles文件夹：我很好地使用了以下结构：

src/styles
> _variables.scss
> styles.scss

创建一个styles文件夹，并将主styles.scss放在其中，然后添加：

@import 'variables.scss'; // includes font-awesome path

在您的login.component.scss中，也使用@import 'variables.scss';

更新angular.json

您需要用src/styles.scss替换所有具有src/styles/styles.scss的行

根据angular.json中的内容，您可能需要在options和"architect"部分的"test"中添加以下内容：

"stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },

注意：您不会将其放在assets文件夹中，因为该文件夹用于静态资产，例如您需要引用自己的图像。您的样式将在Angular构建过程中自动捆绑到一个文件中并添加dist文件夹

Angular Wiki ：Angular CLI Stories页面上有一篇很好的文章