Angular cli 构建不包含 css 组件

Question

阅读 angular-cli 文档和有关堆栈溢出的一些讨论，我了解到，当使用生成的组件完成项目时，默认情况下内联样式将全部包含在构建中，但是当我构建项目时，似乎没有一个包括内联样式。
例如这个组件：

成分

import { MenubarService } from '../../services/menubar-service/menubar.service'
 
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers:[LoginService]
})
export class LoginComponent implements OnInit {
    constructor(.......

最终项目中不存在 login.component.css 文件。我注意到它有两个原因：
首先，我的应用程序的样式显然与我使用“ngserve”命令时的样式不同，其次是因为使用浏览器检查器元素，我找不到 css 的痕迹。
这是我的 angular-cli 的配置文件

{
  "project": {
  "version": "1.0.0-beta.18",
  "name": "genioimprese"
},
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "images",
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "paper.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    } 
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

除了某些样式和资源之外，它显然是新的 angular-cli 项目的默认文件。我认为我的配置文件有问题，但我找到的唯一文档是here，并且我没有找到任何对我有帮助的内容。

CSS

a{
    color: #0c699e;
}
a:hover,a:active,a:focus{
    color: #218fce;
}

.login{
    text-align: center;
    background-color: white;
    height: 100%;
    padding-top: 7%;
}
.login > .logo{
    height: 30%;
    width: 50%;
}
.input[type='text']{
    background-color: grey;
    color: #218fce;
    border: none; 
    border-radius: 0;
}  
h4{
    color: #218fce;
}
.form-group{
    margin-bottom: 10px;
}
form{
    margin-bottom: 0px;
}
.checkbox-inline{
    margin: 0;
}

Answer 1

我知道这是一个老问题，但 Angular 的 CLI 现在包含一些 CSS 优化选项，这些选项刚刚导致我的应用程序的全局样式表输出为media=print.

尽管没有打印 MQ，但此媒体属性显然不会导致应用任何样式。

<link rel="stylesheet" ... href="styles.css" media="print">

"architect": ...
"build": ...
"configurations": {
  "dev": {
    ...
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": false <--- fix
      },
      "fonts": true
    }