添加哈希到css文件名

Question

背景

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

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

检测设备并注入css的代码

＆＃13;

＆＃13;

 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");
    }
  }

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加“ ng build --prod --output-hashing all”，对生成文件的内容进行哈希处理，并将哈希值附加到文件名中，以方便浏览器缓存清除

Answer 2

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

<强> styles.desktop.scss

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

<强> styles.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应自动生成散列和样式表文件。