Angular 6 - меньше CSS 'импорт больше не работает - PullRequest
Новая
       5

Angular 6 - меньше CSS 'импорт больше не работает

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

Я хотел повторно использовать некоторую структуру из проекта Angular 5, который использует Less. В этом старом проекте я мог просто загрузить .less файлы, используя эту строку из компонента: 

@import '~app/shared/less/bootstrap';

Это будет загружать: 

/my-app/src/app/shared/less/bootstrap.less

Теперь у меня есть пустой проект Angular 6, который также настроен на использование Less в качестве препроцессора: 

ng new my-app --routing --style less

Выписка из angular.json: 

"my-app": {
  "prefix": "app",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "less"
    }
  },
  "architect": {
    "build": {
      "options": {
        "styles": [
          "src/styles.less",
          "app/shared/less/styles.less"

Однако линия 

@import '~app/shared/less/bootstrap';

… компилируется с ошибкой:

Не удалось скомпилировать.
./src/app/shared/component/some.component.less
Ошибка сборки модуля:
@import '~ app / shared / less / bootstrap';
^
'~ app / shared / less / bootstrap' не найден.

Я тоже пробовал: 

@import '.app/shared/less/bootstrap';
@import '.src/app/shared/less/bootstrap';
@import '~app/shared/less/bootstrap.less';

… без удачи.

Я забыл что-то настроить?

1 Ответ

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

В Angular 6 вы должны import все файлы в основной (в вашем случае src/styles.less) файл CSS:

В angular.json положить ТОЛЬКО: 

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

В styles.less (импортировать все нужные файлы с / до app): 

@import './app/shared/less/bootstrap.less';

Смотрите мой ответ на css здесь: Angular 6 загрузите папки css в angular.json

На ваше редактирование ./src/app..: 

@import './src/app/...'
...