将哈希添加到 css 文件名答案

【问题标题】：Add hash to css file names将哈希添加到 css 文件名
【发布时间】：2018-10-31 21:19:24
【问题描述】：

背景

我有两个 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");
    }
  }

【问题讨论】：

你能发布你的index.html你是如何检测到它的吗？
为什么不使用单个css并添加媒体查询以根据屏幕大小区分css？
我不明白您为什么不能将它们放入您的 style.css 文件中。进行媒体查询，一切顺利。
@trichetriche styles.mobile.css 和 styles.desktop.css 完全不同。所以我决定有两个独立的可管理的 css 而不是一个巨大的文件。
这并没有改变您可以创建一个文件来导入两个单独文件并使用媒体查询来选择要使用的文件这一事实。

标签： angular webpack angular5 angular-cli angular-cli-v6

【解决方案1】：

添加“ng build --prod --output-hashing all”，对生成文件的内容进行hash，并在文件名后附加hash，方便浏览器缓存清除

【讨论】：

【解决方案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 应该会自动生成一个散列文件和一个样式表文件。

【讨论】：

感谢您的回复，但移动用户最终会下载永远不会使用的桌面 css，反之亦然