angular-cli 和 scss 被内联答案

【问题标题】：angular-cli and scss being inlinedangular-cli 和 scss 被内联
【发布时间】：2017-09-22 08:45:41
【问题描述】：

我想我一定遗漏了一些非常简单的东西。

全新安装 angular-cli，用 scss 创建一个新站点。填写全局 style.scss 中的 scss 以及组件 scss 中的一些。

当提供或构建这些 css 时，它们会被内联。它们没有被外部包含，这是我所期望或需要的。

组件级 scss 也不能引用全局 style.scss 中的变量（这也许是我期待的其他东西）

但是我如何使用 scss 生成外部 css 文件以进行交付？

谢谢！保罗

【问题讨论】：

使用像 css.loader, style-loader 和 Extract-text-webpack-plugin 这样的加载器，因为 angular-cli 内部使用 webpack。

【解决方案1】：

在 angular-cli.json 中找到 "styleExt": "css" 并替换为 "styleExt": "scss" 然后将 "styles":[] 中的 "styles.scss" 添加到 .angular-cli.json`

如果你想在组件中使用 scss，比如styleUrls: ['app.component.scss']

为全局变量创建一个 variable.scss 并导入所有其他 scss 文件。

【讨论】：

【解决方案2】：

尝试这样做：

"server:dev": "ng serve -e dev --port 9000 --progress --watch --open --ec=true",

添加 '--ec=true' 应该可以解决问题。否则，您可以通过添加更多加载器来弹出您的 angular-cli 应用程序，并手动配置您的 webpack 文件。 https://github.com/angular/angular-cli/wiki/eject

【讨论】：

我会试一试。但是，我注意到，如果将应用程序捆绑在一起进行分发，那么样式似乎确实在单独的文件中提供，所以我假设这是开发中本地服务的结果。 ec 是什么意思?谢谢！
是的，做 prod 或 AOT 构建会提取样式。如果您在 dev 中执行 --ec=true 或 --extract-css ，同样的事情是，它会将您的样式提取到带有它们的 sourceMaps 的单独文件中。 PS。我们不应该在 dev 中提取 CSS，它会使构建变得非常缓慢（但目前这是可用的解决方案。）github.com/angular/angular-cli/issues/4199
-- "如果你在 dev 中执行 --ec=true 或 --extract-css ，它会做的是，它将你的样式提取到带有它们的 sourceMaps 的单独文件中。" - 不必要。请记住， --extract-css 选项仅将全局 css 样式提取到样式表中，而不是组件级样式。您在.angular-cli.json 的styles 数组中列出的任何内容都是全局样式。