如何从 Angular 生成缩小的 css

分享于2023年06月29日 angular angular-cli css sass webpack 问答
【问题标题】:How to generate minified css from Angular (2+)如何从 Angular (2+) 生成缩小的 css
【发布时间】:2023-06-28 05:58:01
【问题描述】:

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

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


【解决方案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 时自动运行