要向Angular 7组件的SCSS文件注入新的CSS样式,可以按照以下步骤进行:
app.component.scss
文件,我们想要注入样式到.custom-style
选择器中。.custom-style {
color: red;
font-weight: bold;
}
ViewEncapsulation
来禁用组件的视图封装,以便我们可以在组件的SCSS文件中全局使用自定义样式。在组件类上添加encapsulation: ViewEncapsulation.None
。import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// component code
}
styles.scss
)中导入组件的SCSS文件。@import 'app.component.scss';
angular.json
文件中正确配置了样式文件的路径。在architect
-> build
-> options
-> styles
中添加组件的SCSS文件路径。"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"src/app/app.component.scss"
],
// other options
}
}
}
这样,你的自定义样式就会被注入到组件的SCSS文件中,并且可以在整个组件中使用。