css - 如何在 angular.json 的 lazyload css 中添加哈希

Question

我们在 css 文件夹中创建了 lazyload。但是当我们在 dist 文件夹中的 css 文件夹中构建元素时，.css 文件不是散列。我们希望延迟加载的 css 文件名应该像 styles.6fc199501f143ca330d5.css。

Answer 1

您使用 Webpack 创建可延迟加载的哈希样式。

我的 Angular CLI 版本:8.3.19

1. ng 新的 lazy-load-css --style css
2. 打开 angular.json 并从样式数组中删除 styles.css。
3. 在src文件夹中创建style-loader.js，然后替换为以下代码:

import styles from './styles.css';
const node = document.createElement('style');
node.textContent = styles;
document.querySelector('head').appendChild(node);

1. 在 AppComponent 中添加 ngOnInit 方法，如下所示:

  ngOnInit() {
    setTimeout(() => {
      import('src/style-loader');
    }, 1500);
  }

See Webpack import() function. Also you can see Webpack magic comments for chunk naming, etc.

1. 将样式添加到 styles.css 以查看更改。我添加了背景颜色样式。
2. 运行应用

运行 ng build --prod 查看哈希