В том числе bootstrap css в Aurelia

Я новичок в Aurelia и падаю на первое препятствие. Я создал новый проект с использованием aurelia cli и решил использовать меньше.

Это отлично работает, пока я не попытаюсь использовать бутстрап. Я установил bootstrap с npm, который появляется в node_modules/bootstrap/

Это имеет структуру каталогов

dist fonts grunt Gruntfile.js js less LICENSE package.json README.md

В каталоге dist есть файлы css.

В моем шаблоне я делаю

Ошибка, которую я получаю, Необработанное отклонение Ошибка: не удалось загрузить требуемый файл CSS: bootstrap/css/bootstrap.css

Как сообщить Aurelia, где находятся загрузочные файлы css и как их использовать?

Спасибо

Ответ 1

Мы все еще работаем над возможностью CLI импортировать библиотеки в проект и правильно их настроить для объединения. Помните, что это альфа. В будущем у нас будут значительные улучшения. В то же время помните, что вы всегда можете использовать традиционные методы для включения библиотек, если не уверены, что делать. Таким образом, я бы просто добавил тег стиля на вашу html-страницу и тег script, просто указав на расположение файлов в папке ваших пакетов.

Это основной прецедент для нас, мы еще не разработали все возможности импорта библиотеки. Мы рассмотрим это в ближайшее время.

Ответ 2

Я обнаружил одну простую вещь. Каждый раз, когда вы изменяете файл aurelia.json, вам нужно завершить задачу au run --watch, запустить его снова, и он просто сработает.

Я не нашел это в документации.

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

Ответ 3

Существует решение для загрузочного бутстрапа, загруженного с npm:

app.html:

<require from="bootstrap/css/bootstrap.css"></require>

package.json вы должны добавить:

"overrides": {
   "npm:[email protected]^3.0.0": {
     "format": "amd"
   }
}

aurelia.json(папка aurelia_project), которую вы должны добавить в конце пакета app-bundle.js:

"dependencies": [
"jquery",
 {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
    "css/bootstrap.css"
  ]
}
]

Он должен выглядеть так:

"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ],
    "dependencies": [
      "jquery",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }
    ]
  },

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

Ответ 4

Использование Aurelia CLI

Сначала, установите в свой проект следующее:

au install jquery @2
au install bootstrap

Второй, в aurelia.json добавьте эту строку в пакеты: vendor-bundle.js

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": [
    "jquery"
  ],
  "resources": [
    "css/bootstrap.css"
  ],
  "exports": "$"
}

Затем добавьте следующие шрифты после зависимостей

"copyFiles": {
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}

Третий, после установки импорта/установки. Теперь вы можете ссылаться на него внутри вашего app.html

<require from="bootstrap/css/bootstrap.css"></require>

Или просто добавьте его как globalResources внутри main.ts

aurelia.use
    .standardConfiguration()
      .feature('resources')
      .globalResources('bootstrap/css/bootstrap.css');

Для получения дополнительной информации о au install/import проверьте здесь или добавьте библиотеку в расслоения.

Ответ 5

Я обнаружил, что мне пришлось изменить путь boostrap css в app.html на путь, ожидаемый для Bootstrap 4, согласно комментарию к Aurelia Discourse:

из этого:

<require from="bootstrap/css/bootstrap.css"></require>

к этому:

<require from="bootstrap/dist/css/bootstrap.css"></require>

Ответ 6

Если вы находитесь здесь в июле 2019 года, ответ @davidjmcclelland - это то, что сработало для меня. После установки начальной загрузки просто включите

require from=bootstrap/dist/css/bootstrap.css>

в ваш app.html. Никаких настроек не требуется.