Преобразование проекта bootstrap 4 html в Angular 9 - PullRequest
Новая
       49

Преобразование проекта bootstrap 4 html в Angular 9

1 голос
/ 05 августа 2020

Итак, я нашел действительно хороший шаблон, который хочу использовать, но он всего HTML с использованием bootstrap. Я нашел несколько руководств о том, как преобразовать аналогичный проект, и это кажется довольно простым (например, здесь )

Я добавил первый компонент, и голова выглядит так (я прокомментировал можно использовать только один тег ссылок для работы с одним за раз): 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Some Html Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="../../assets/css/animate.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome-font-awesome.min.css">
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css"> -->
</head>

Я добавил следующее в angular. json: 

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

В стилях. css Я добавил: 

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Я также установил 

npm i bootstrap ngx-bootstrap jquery tether

При попытке запустить npm start я получаю следующую ошибку:

ERROR in HostResourceLoader: loader(/Users/felipe/Documents/mtalents/frontend/src/assets/css/animate.css) returned a Promise

Когда я запускаю его без тегов ссылок, он работает нормально, но все стили отсутствуют (например, я просто получаю кусок текста).

Я не изменял скрипт теги, но они, похоже, еще не жалуются.

Для ясности я добавил css, шрифты, изображения, js, библиотеки, папки поставщиков из шаблона bootstrap внутри src / assets .

Я не уверен, что мне не хватает? Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 05 августа 2020

в массиве скриптов должно быть только javascript файлов или машинописного текста (я не уверен в машинописном тексте), поэтому удалите этот 

"scripts": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

ВАРИАНТ 1: если вы не используете стиль s css, вы можете добавить его в файл angular. json по мере добавления других стилей 

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/assets/css/animate.css",
              "src/styles.css",
           ],
"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/@popperjs/core/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

и учитывать порядок в этом массиве стилей, потому что они перезаписывают друг друга

ВАРИАНТ 2: это должен быть добавлен в ваш файл styles.s css, но скрипты bootstrap должны быть добавлены в angular. json

@import '~node_modules/bootstrap/dist/css/bootstrap.min.css';
0 голосов
/ 05 августа 2020

What Eri c Aska опубликовал правильно, и вам также необходимо удалить ссылку на файл css из вашего html, если вы ссылаетесь на него в своем angular. json. Помещение его в angular. json по существу помещает ссылку в раздел заголовка вашего файла html во время компиляции. Нет причин иметь его в обоих местах, как и для скриптов.

У вас также есть файл css в разделе «скрипты», его нужно удалить, а затем вы также импортировали тот же css файл в свои стили. css. Здесь тоже нет необходимости в двойном окунании. Я обычно помещаю такие глобальные вещи, как bootstrap, в свой angular. json, так как почти каждая часть приложения будет использовать его. Однако, как только он окажется в вашем angular. json, вам не нужно снова импортировать его в свои стили. css.

Если вы хотите настроить переменные bootstrap S CSS, импорт в папку styles.s css будет исключением из ситуации, описанной в параграфе выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...