Добавить хэш к именам CSS-файлов - PullRequest
Новая
       56

Добавить хэш к именам CSS-файлов

0 голосов
/ 11 июня 2018

Фон

  • У меня есть два файла CSS - styles.mobile.css и styles.desktop.css
  • Как следует из названия, я используюдва отдельных CSS для мобильных и настольных ПК
  • Я динамически внедряю CSS в index.html в зависимости от размера экрана
  • Очевидно, я не могу поместить их в styles.css
  • Iприкрепил скриншот структуры папок

Вопрос Есть ли способ добавить хеширование в styles.mobile.css и styles.desktop.css при запуске ng build --prod

Код для обнаружения устройства и ввода 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");
    }
  }

enter image description here

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Добавьте «ng build --prod --output-hashing all», добавьте хеш-содержимое сгенерированных файлов и добавьте хеш к имени файла, чтобы упростить очистку кэша браузера.

0 голосов
/ 11 июня 2018

Вам нужно управлять своими CSS-файлами в таблице стилей, а не в index.html, сначала преобразуйте ваши 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 автоматически создает хэши и файл таблицы стилей.

...