使用 angular-cli 进行 CSS 编译

Posted 2023-02-22

【中文标题】使用 angular-cli 进行 CSS 编译

【英文标题】：CSS compilation with angular-cli

【发布时间】：2017-10-17 14:15:32

【问题描述】：

我刚开始使用 angular 4.0.0 并且 angular-cli 很不错。 但是我在编译 sass 文件时遇到了问题。

webpack 不是将所有组件的 .scss 文件解析为一个，而是添加一个内联样式标签，其中包含所有 css。

这是预期的行为还是我在 angular-cli 中缺少一些 node-sass 和 sass-loader 的配置

     "styles": [
    "styles.scss"
  ],
   "defaults": 
"styleExt": "scss",
"component": 

这就是样式的 cli 配置。

为应用配置styles.scss导入app.components.scss和 app.component.scss 导入所有其他组件的 scss。

感谢您的帮助。

【问题讨论】：

那不是 webpack 做内联样式，而是 Angular。这就是它的工作原理，所以预期的行为阅读ViewEncapsulation

感谢您的回复。但是，如果一个组件是另一个组件的覆盖属性。并且每个组件样式都包含在 HEAD 中的单独样式中会产生冲突吗？因为我面临这个问题，其中带有 css 的静态 html 页面适用于所有浏览器，但是当我将它分成两个组件时，它会在 IE 中中断

就像我说的，“阅读”有关 ViewEncapsulation 的信息。你显然还不明白，那些注入的样式标签到底发生了什么

【参考方案1】：

文件styles.scss 通常用于存储全局样式。请在此处阅读更多信息：https://github.com/angular/angular-cli/wiki/stories-global-styles

如果您遇到样式问题 - 请仔细检查以确保您的 package.json 中包含 node-sass。如果没有，那么npm install node-sass --save-dev

如果我正确理解了您的问题，那么是的，这是预期的行为，Angular 将这种行为称为 View Encapsulation。您可以在此处阅读有关它以及 Angular 如何处理样式的更多信息：https://angular.io/docs/ts/latest/guide/component-styles.html