在Angular 7中,可以使用@import
指令加载SCSS文件,并且加载顺序是按照@import
指令的出现顺序进行的。
以下是一个示例代码,展示了如何使用@import
指令加载SCSS文件:
styles.scss
文件中,按照需要的顺序使用@import
指令加载其他的SCSS文件。// styles.scss
// 加载全局样式
@import 'styles/global';
// 加载组件样式
@import 'styles/component1';
@import 'styles/component2';
.component.scss
文件中,可以使用@import
指令加载该组件所需的其他样式文件。// component1.component.scss
// 加载组件特定样式
@import 'styles/component1-specific';
// 加载共享样式
@import 'styles/shared';
angular.json
中,确保已经将上述SCSS文件添加到了styles
数组中。// angular.json
"styles": [
"src/styles.scss",
"src/app/styles/component1.component.scss",
"src/app/styles/component2.component.scss",
...
],
通过以上的设置,SCSS文件将按照加载顺序进行编译和应用。请根据自己的需求调整@import
指令的顺序,以确保正确的加载顺序。