Блог

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

ОШИБКА в модуле multi styles не найдена: Ошибка: не удается разрешить ‘/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

 krishna@Krishna:~/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
  

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

В angular-cli.json,

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

Обновить

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

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

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

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

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

    "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 мне нужен был «.. /», в то время как bootstap этого не требовал.

Альтернативный вариант, основанный на проблемах, которые у меня были:

     "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

укажите путь "./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"
]
  

В моем случае ошибка заключалась в том, что у меня

     "styles":[
      "styles.css"
    ]
  

в my .angular-cli.json

я решил ее, вручную введя путь ко всем моим СКРИПТАМ и CSS .. т.е., например

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

Пути в angular-cli.json относятся к корню проекта (src / обычно). Например, у вас есть файл src/styles.css, но в angular-cli.json он указан только как styles.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"
]
  

Перейдите к angular.json

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

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

ДО: ПОСЛЕ:

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

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

 npm uninstall bootstrap --save
  

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

 npm install bootstrap@3.3.7 --save
  

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

 @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
  

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

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

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

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

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

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

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

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

измените его соответствующим образом в объекте angular.json styles

У меня была такая же проблема. Я решил ее, удалив bootstrap

 npm uninstall bootstrap --save
  

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

 npm uninstall bootstrap --save
  

Это сработало для меня.

Для node_modules должен быть указан полный физический путь .Я указал полный физический путь к файлу css и, наконец, решил проблемы