无法在角度中找到 CSS

Question

我已经使用 cli 生成了组件

"ng generate component registration"

它创建了以下文件

registration.component.html
registration.component.scss
registration.component.spec.ts
registration.component.ts

现在，我在 scss 文件中添加了一个 css 类

.loginBox {
 width: 260px;
}

现在在 html 文件中

<p class="loginBox"> test </p>

它指出 loginBox 在我的 IDE 中是未定义的 CSS，当我在 ng serve 中进行测试时，它没有显示应用了 css。

当我在 class= 上进行自动完成时，我看到有很多我没有添加的 css，例如 L0, L1, L2, L3 ....那么这些 css 来自哪里，为什么我的本地 css 不起作用？编辑：那些 css 看起来像是 bootstrap css 或有些内置 css 有类似 mat-action-row 或其他类型的 css 我不认为我包括它们。

我已经包含的ts文件styleUrls: ['./registration.component.scss']

编辑：即使我添加了全局styles.scss，它仍然说 loginBox 是未定义的 CSS。可能是某些配置或某些东西丢失了......我无法弄清楚它是什么......

编辑： registration.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

registration.component.scss

.loginBox {
  /* color: #4C4633; */
  /* font-size: 12px; */
  /* margin-bottom: 10px; */
  /* padding: 10px 0px 10px 10px; */
  width: 260px;
}

registration.component.html

<p class="loginBox">
  registration works!
</p>
<div class="loginBox"> test </div>

注册文件夹上方..

app.component.html

<div class="container-fluid p-0">
  <router-outlet></router-outlet>
</div>

app.module.ts

const routes: Routes = [
  { path: '', component: RegistrationComponent}
];
@NgModule({
  declarations: [RegistrationComponent],
imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [PreviousUrlService, {provide: APP_BASE_HREF, useValue : '/' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

看到这个answer here。在@component 定义中使用encapsulation: ViewEncapsulation.None。

Answer 2

scss 是否正确读取？尝试运行此命令

ng config schematics.@schematics/angular:component.styleext scss

然后，重新运行你的项目

Answer 3

尝试：

:host ::ng-deep{
  .loginBox {
    width: 260px;
  }
}