angular2-cli дает ошибку стилей @multi

Я недавно начал использовать angular2-cli и создал новый проект. Я хотел использовать bootstrap в своем проекте, поэтому я установил bootstrap, а затем хотел импортировать файл css начальной загрузки, как показано в руководстве angular2-cli здесь. https://github.com/angular/angular-cli#global-library-installation После запуска ng serve я получаю следующую ошибку.

ОШИБКА в нескольких стилях Модуль не найден: Ошибка: невозможно разрешить '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' в '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models '@multi styles

Что я делаю неправильно?

Информация о версии angular2-cli

[email protected]:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64

Ответы

Ответ 1

Добавить../перед путем.

В angular-cli.json,

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

Обновить

В angular7 есть файл angular.json, и вам не нужно добавлять../перед путем

Ответ 2

В Angular 7 файл называется angular.json.

Убедитесь, что вы выбрали правильное расширение для опции "styles". В моем случае я установил Angular CLI с опцией SCSS, но расширение было установлено как SASS по умолчанию.

       "styles": [
          "src/styles.scss" // default was: src/styles.sass
        ],

enter image description here

Ответ 3

Я использую Angular 6, поэтому мое имя файла - angular.json, но я смог решить аналогичную проблему, удалив путь "../", который он запрашивал. Ниже приведены настройки для добавления начальной загрузки и jquery в мое угловое приложение.

   "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": ["../node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

Примечание: для jquery мне нужно было "../", в то время как загрузчик не требовал его.

Поочередно по тем вопросам, которые у меня были:

    "styles": [
          "src/styles.css", 
          "../node_modules/bootstrap/dist/css/bootstrap.css"
       ],
    "scripts": [
          "../node_modules/jquery/dist/jquery.js", 
          "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

Кроме того, эта статья содержит несколько альтернативных вариантов его настройки.

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

Ответ 4

"./node_modules/bootstrap/dist/css/bootstrap.min.css" путь как "./node_modules/bootstrap/dist/css/bootstrap.min.css" не нравится "../node_modules/bootstrap/dist/css/bootstrap.min.css"

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Ответ 5

В моем случае ошибка была в том, что я

    "styles":[
      "styles.css"
    ]

в моем.angular-cli.json

я решил это, вручную набрав путь для всех моих SCRIPTS и CSS.. например, например

    "styles":[
      "styles/bootstrap.scss",
      "styles/app.scss",
     ]

Пути в angular-cli.json относятся к корню проекта (src/normal). Например, у вас есть файл src/styles.css, но в angular-cli.json он указан только как styles.css.

Ответ 6

укажите путь как "./node_modules/bootstrap/dist/css/bootstrap.min.css" не нравится "../node_modules/bootstrap/dist/css/bootstrap.min.css"

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Ответ 7

Перейти к angular.json

перейти к стилям и добавить еще одну запись для bootstrap.min.css, как

enter image description here

Ответ 8

вот для меня это решение. в вашем текущем каталоге у вас есть скрытый файл с именем.angular-cli.json, откройте это и измените "style.sass" на "style.css: запустите ng build, и все готово.

ПЕРЕД: enter image description here ПОСЛЕ: enter image description here

Ответ 9

Приведенное ниже решение сработало для меня, так как кажется, что есть ошибка в bootstrap 4.0:

npm uninstall bootstrap --save

затем установите

npm install [email protected] --save

Ответ 10

У меня была такая же проблема, но я решил эту проблему, указав полный путь к файлу, как "styles": [ "F: /Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F: /Angular2Projects/Angular/my-app/src/styles.css" ], ниже "styles": [ "F: /Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F: /Angular2Projects/Angular/my-app/src/styles.css" ],

Ответ 11

Вам просто нужно добавить указанный ниже код в style.css

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Надеюсь, поможет

Ответ 12

Скопируйте и вставьте следующее в ваш файл {} angular.json, должно работать идеально.

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css" ],

Ответ 13

Я получил ту же ошибку в angular 7 после установки primeng

Я удалил./из пути в файле angular.json переименуйте "src/styles.scss" в "src/styles.css", и это работает для меня

Ответ 14

В файле angular.json я изменил styles.sass на styles.scss.

Я успешно строю

то есть перейдите в папку src и увидите расширение файла стилей

измените его соответственно в объекте стилей angular.json