角度5：.scss更改未在HTML

Question

我正在使用Angular 5.

每当我对.scss文件进行更改时，都无法在HTML文件中使用。正在使用的文件包括： admin-login.component.ts ， admin-login.component.css 和 admin-login.component.html 文件结构的定义如下：

我对admin-login.component.scss文件进行了更改，但没有任何反应。每当我进行更改并使用admin-login.component.html标记将其直接添加到<style></style>文件时，情况就会有效。

为什么会这样？

TIA

管理-login.component.ts

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

@Component({
  selector: 'app-admin-login',
  templateUrl: './admin-login.component.html',
  styleUrls: ['./admin-login.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AdminLoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit()
  { document.getElementById('preloader').classList.add('hide');  }

}

admin-login.component.css（此处定义样式信息不起作用）

:host {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.input {
    position: relative;
}

div.input label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 10px;
    background: white;
    font-size: 20px;
    padding: 5px 2px;
}

div.input input {
    padding: 10px 20px;
    font-size: 25px;
    outline: 0;
}

div.input {
    margin-top: 20px;
}


.main {
    min-height: 500px;
    width: 100%;
}

.inner-content {
    width: 50%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

admin-login.component.html（在HTML文件中添加样式）

<style>
  .main {
    min-height: 500px;
    width: 100%;
}

.inner-content {
    width: 50%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
</style>

<div class="main">
  <div class="inner-content">
    <form (submit)="loginUser($event)">
      <div class="input">
        <label>Username</label>
        <input type="text">
      </div>
      <div class="input">
        <label>Password</label>
        <input type="password">
      </div>
      <div class="input">
        <input type="submit" value="Login">
      </div>
    </form>
  </div>
</div>

Answer 1

您的angular cli json文件可能存在问题。 特别：      "stylePreprocessorOptions": { "includePaths": [ "styles", "app/components", "app/containers" ] },