如何从 Angular (2+) 生成缩小的 css

【问题标题】：How to generate minified css from Angular (2+)如何从 Angular (2+) 生成缩小的 css
【发布时间】：2020-07-21 02:43:33
【问题描述】：

我在 SASS 中构建了一个 Angular 项目，但我需要能够在 codepen 演示中使用该项目的样式。我在想我需要以某种方式在“dist”文件夹中生成缩小的 CSS，以便我可以将它用作 codepen 中的外部源。 Angular 项目中的样式会不断更新，因此我正在寻找一种能够在每次运行构建命令时自动生成 CSS 文件的解决方案。

我不确定如何设置或搜索什么。有什么想法吗？

【问题讨论】：

标签： css angular webpack sass angular-cli

【解决方案1】：

默认情况下，angular 将样式直接绑定到指令，这意味着它们是生成的 javascript 的一部分，而不是 css。

您可以使用 node-sass cli： https://github.com/sass/node-sass

用

安装它

npm i -g node-sass

并用它来转换你的 sass/scss 文件

node-sass src/style.scss dest/style.css

【讨论】：

运行npm build时如何使用它自动生成文件？
你可以使用npm脚本，添加“prebuild”：“node-sass src/style.scss dest/style.css”。那么这个命令会在你调用 npm build 时自动运行