使用AngularCLI创建一个新的Angular项目：ngnewmy-sassy-app--style=scss创建以下scss文件：styles.scss是我们使用的主要scss文件,在以下划线开头的Imported_variables.scss和_mixins.scss中//src/sass/styles.scss@import'./variables';@import'./mixins';最后在angular.json中指定此样式只需.scss文件："styles":["sass/styles.scss"]现在我们有了新的_variables.scss和_mixins.scss文件，我们想在其他Angular组件中使用它们。在其他项目中，您可能习惯于在任何地方访问这些scss文件中定义的Sass变量。在AngularCLI中，所有组件都是独立的，它们的Sass文件也是如此。为了在组件的Sass文件中使用_variables.scss中定义的变量，您需要导入_variables.scss文件。一种方式是使用组件的相对路径@import，比如../../。如果您有许多嵌套文件夹或最终需要移动这些scss文件，这可能不是一个好主意-可读性差且容易出错。一个好的方法是使用别名语法，由特殊符号波浪号表示：~。英语中~的词是波浪号。//src/app/app.component.scss@import'~sass/variables';//现在我们可以使用这些变量了！波浪号(~)会告诉Sass在src/文件夹中查找，这是导入Sass文件的快捷方式（shortcut）。Angular项目中导入node_modules文件夹下文件的一些技巧我们通过一个实际的例子来讲解。假设我们引入了一个依赖`bootstrap-sass:npminstallbootstrap-sass--save这个npm包有一些scss文件：我们可以更新angular.json，导入node_modules文件夹：{..."apps":[{"root":"src",..."stylePreprocessorOptions":{"includePaths":[".","./stylings","../node_modules/bootstrap-sass/assets/stylesheets"]}}]}然后，在Component的样式文件，可以使用相对路径导入node_modules文件夹下的scss文件：//hello.component.scss@import"variables";@import"stylings2/variables";@impoer“bootstrap/variables”；h1{颜色：$brand-color；字体大小：$font-size-large；字体系列：$font-family-serif;}
