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文件夹，将 main 放入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文件夹中，因为那是静态资源，例如您需要自己引用的图像。dist在 Angular 构建过程中，您的样式将自动捆绑到单个文件并添加文件夹中

Angular Wiki ： Angular CLI Stories页面上有一篇关于此的好文章