Импорт Angular 4 в файл .less не обновляется при изменении - PullRequest
0 голосов
/ 28 мая 2018

В настоящее время я создаю небольшой Angular-проект, в котором для стилизации я использую меньше.

Я хотел разбить стили на отдельные папки отдельно от компонентов и вместо этого получить основной файл импорта: main.less, который состоит только из импорта из таблиц стилей вокруг него.Например:

buttons/buttons.less

header/header.less

hero/hero.less

Они импортируются в main.less.Это означает, что мои компоненты не используют свойство styleURL, вместо этого оно опирается на глобальную таблицу стилей.

В моем angular.json я указал на него стили, например:

"styles": [ 
    "src/app/less/main.less" 
]

Когда я запускаю ng serve, он работает просто отлично, но когда я что-то меняю в кнопках .less, он обновляет страницу (как и ожидалось), но изменение не применяется.Это касается каждого файла импорта в main.less.Но если я добавлю файл button.less непосредственно в "styles" в angular.json, он будет работать как шарм.Кроме того, если я добавлю стиль непосредственно в файл main.less и, например, добавлю это, эта строка будет работать:

body {
    background-color: red;
}

Что я делаю неправильно, почему он не обрабатывает мой импорт?Если я перезагружаю угловой сервер, он перекомпилирует файлы и tada.wav, изменения добавляются.Через это не регистрируются ошибки.

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Похоже, что это связано с less-loader 4.xx, о котором сообщалось на странице Angulars github.

Понижение до less-loader 3.xx решает проблему.Просто используйте:

npm install --save-dev less-loader@3.0.0

Tada.wav

0 голосов
/ 20 июля 2018

Похоже, что была проблема в одной из less версий.Вопрос обсуждался здесь:

https://github.com/webpack-contrib/less-loader/issues/252

Есть два варианта:

  • Обновление на less@2.7.3
  • Обновлениена less@3.7.1

Я пробовал обе эти версии, и они работают с less-loader": "4.1.0".Ранее у меня было less@3.0.4, а обновление импортированных .less модулей не вызывало горячую перезагрузку страницы.

0 голосов
/ 28 мая 2018

Вы должны указать серверу следить за изменениями.

ng serve --watch
...