angular - 将哈希添加到 css 文件名

Question

背景

• 我有两个css文件-styles.mobile.css和styles.desktop.css
• 顾名思义，我为移动和桌面视图使用了两个单独的 css
• 我根据屏幕大小在 index.html 中动态注入 css
• 显然我不能把它们放在styles.css
• 我附上了文件夹结构截图

问题 当我运行 ng build --prod 时，有没有办法向styles.mobile.css 和styles.desktop.css 添加散列

检测设备和注入 css 的代码

 private addCss(): void {
    if (this.currentDevice === "desktop") {
      this.document
        .getElementById("theme")
        .setAttribute("href", "styles.desktop.css");
    } else {
      this.document
        .getElementById("theme")
        .setAttribute("href", "styles.mobile.css");
    }
  }

Answer 1

添加“ng build --prod --output-hashing all”，对生成文件的内容进行hash，并将hash附加到文件名，以方便浏览器缓存破坏

Answer 2

您需要在样式表上管理您的 css 文件，而不是在您的index.html, 首先将您的 css 文件转换为scss

样式.desktop.scss

@media (min-width: 940px) {
   // your styles here
}

样式.mobile.scss

@media (max-width: 940px) and (min-width: 100px) {
  // mobile specific styles here
}

编辑你.angular-cli.json

将两个 scss 添加到app.styles

"apps": [
  {
    ...
    styles: [
      "styles.desktop.css",
      "styles.mobile.css"
    ]
  }
]

ng build --prod应该自动生成一个散列和一个样式表文件。