Question

我在localhost环境中使用Angular Material 2。当我在浏览器中查看应用程序时，我注意到没有链接的.css文件（期望至少有一个 - 例如angular.material.css）

相反，所有样式都以块的形式位于头部。实际上有几十种。

如果这是AM2滚动的方式，我可以使用几个头级内联样式块，但我更希望有一个缩小的.css文件，其中包含应用程序的大部分样式。

除了明显的缓存优势外，拥有链接的.css还允许在sources选项卡中打开和编辑整个.css文件（用于调试/测试CSS更改）

有人可以告诉我是否有全局配置设置可以实现这一点吗？

Answer 1

我们可以使用Angular-CLI使用一些命令

来完成所有这些操作

捆绑
缩小
树摇晃
掉毛
脚手架（您可以创建新项目并生成组件，服务和其他功能）
构建
即成
-Test

您无需为构建明确执行任何操作。 Angular CLI将自动处理所有内容。他们在幕后使用 Webpack 来做那些事情

如果您没有使用Angular-CLI，那么您必须使用某些第三方软件包（例如 Webpack或Gulp >手动执行此操作，或者还有其他一些包也可用。这两个套餐非常受欢迎。

为构建设置这些内容非常困难，因此Angular CLI必须能够创建我们可以部署和执行的优化构建。

Answer 2

将所有样式放在.angular-cli.json中，如下所示

  "prefix": "wahtever",
  "styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss",
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "assets/codemirror/codemirror.css",
    "styles.scss"
  ],

有两种构建

1。 prod --aot build

如果是prod Ahead Of Time compilation版本，它会缩小并压缩为一个名为styles.bundle.js的文件，并保存所有css。

2。 dev un aot for debug

其他是当你执行ng serve或ng build时，它只是编译并在需要时为您提供调试选项。它通常在开发时使用。

Angular编译器设置指定链接的.css vs内联样式块？

2 个答案:

1。 prod --aot build

2。 dev un aot for debug