Заменить элементы ссылки на CSS / скомпилированный SASS в Web Pack Dev Server с HMR - PullRequest
Новая
       33

Заменить элементы ссылки на CSS / скомпилированный SASS в Web Pack Dev Server с HMR

0 голосов
/ 09 июля 2019

Использование (и застрял) с Webpack 3.

У меня есть такая структура файла: 

source/
  css/
    - style.scss
    - _partial1.scss
    - _partial2.scss
  js/
    - app.js
public/
  - dist/
  - index.html

app.js 

import style from '../css/style.scss'

style.scss 

@import 'partial1'
@import 'partial2'

index.html 

<html>
<head>
  <link ref="stylesheet" href="dist/style.css"/>
</head>
<body>
  <script src="dist/app.built.js"></script>
</body>
</html>

Производственная конфигурация Webpack выводит все встроенные JS / CSS в открытый доступ, и когда я захожу на свой созданный сайт, я вижу, что мои стили применены и мои скрипты работают должным образом, отлично!

Однако, когда я работаю в режиме dev (webpack-dev-server) с включенным HMR, у меня начинаются проблемы. Похоже, что HMR хочет, чтобы вы загрузили скомпилированный SASS в элемент стиля, и он заменит этот элемент при изменении вашего SASS. Это проблематично для меня, так как я уже включаю встроенный CSS на странице через элемент ссылки. По сути, это размещение встроенного CSS на странице дважды:

  • ранее созданный CSS, включенный через элемент ссылки
  • недавно созданный CSS в теге стиля

Итак, если я ничего не меняю после предыдущей сборки prod, запускаю dev-сервер, я могу по существу очистить весь файл style.scss, webpack-dev-server перекомпилирует и перезагружает элемент style, и ничего на самом деле не меняется ( элемент стилей теперь пуст, но предыдущий сгенерированный файл все еще связан). Страница выглядит так же.

Вместо того, чтобы webpack-dev-server создавал элемент стиля, можно ли вместо этого сгенерировать dist / style.css и выполнить горячую перезагрузку элемента link?

...