Angular CLI构建不包括CSS组件。

Question

Angular CLI构建不包括CSS组件。

8

阅读angular-cli文档和一些Stack Overflow的讨论后，我了解到当一个项目用生成的组件完成时，内联样式将默认包含在构建中，但是当我构建我的项目时，似乎没有任何内联样式被包含。
例如，这个组件：

组件

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文件。我注意到这有两个原因：
首先，我的应用程序的样式与使用“ng serve”命令时的样式不同，其次，使用浏览器检查元素时，我找不到我的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项目的默认文件。我觉得我的配置文件有问题，但我找到的唯一文档在这里，并没有找到任何帮助我的东西。

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;
}

- mautrok

1

执行 ng build --prod 后，您的样式没有显示，是这样的吧？在浏览器中打开该生产构建时，是否打开了开发工具中的控制台或网络选项卡，以查看是否存在某些问题？ - Riscie

是的，这是我检查的生产版本，控制台没有问题，我觉得可能缺少了一些东西，您想看一下dist文件夹吗？ - mautrok

@Riscie 我已经清除了缓存，现在我注意到即使在服务模式下也没有内联样式。 - mautrok

你尝试重新安装Angular CLI了吗，就像我所做的那样？你使用的是哪个版本？你的样式是内联样式还是在main.css中定义的样式？ - mautrok

同样的问题，我尝试了css、scss和sass。在执行ng build --prod --aot之后，它们都会生成一个空的样式文件。我还没有弹出webpack配置，但如果没有办法解决，我将不得不手动执行它。 - Adrian Moisa

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Racicot · Accepted Answer

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

尽管没有打印媒体查询，但是这个媒体属性显然会导致没有样式被应用。

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

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