РЕАКТИРОВАТЬ импорт CSS и JS файлов - PullRequest
Новая
       37

РЕАКТИРОВАТЬ импорт CSS и JS файлов

0 голосов
/ 20 октября 2019

Мое приложение должно иметь две страницы, одну целевую страницу и одну страницу администратора. Обе страницы используют разные темы. Я не смог объединить файлы css и js этих двух страниц в одностраничном приложении. 

const jquery = require('mdbootstrap/js/jquery-1.11.3.min.js');
window.jQuery = jquery;
window.$ = jquery;

require('mdbootstrap/css/bootstrap.min.css');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.css');
require('template/homePage/js/plugins/owl-carousel/owl.theme.css');
require('template/homePage/js/plugins/owl-carousel/owl.transitions.css');
require('template/homePage/css/animate.css');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.css');
require('template/homePage/css/preloader.css');
require('template/homePage/css/style.css');

require('mdbootstrap/js/popper.min.js');
require('mdbootstrap/js/bootstrap.min');
require('template/homePage/js/plugins/vivid-icons');
require('template/homePage/js/plugins/owl-carousel/owl.carousel.js');
require('template/homePage/js/plugins/YouTube_PopUp-master/YouTubePopUp.jquery.js');
require('template/homePage/js/plugins/wow/wow.js');
require('template/homePage/js/plugins/jquery.easing.min.js');
require('template/homePage/js/main');

этот пример импорта не очень хорош. И мне нужны внешние ссылки css и js.

У меня есть две проблемы, одна из них - $ (...). Scrollspy - не функция, другая WOW - не функция.

Нетони работают в последовательности.

1 Ответ

1 голос
/ 20 октября 2019

Когда вы хотите импортировать ресурсы в свое приложение React, вы используете импорт следующим образом: 

// Import with variable assignation

import logo from './logo.png';  

// Import without variable assignation   

import './css/index.css'

Подробнее об этом можно прочитать в документации create-реагировать-app:

https://create -react-app.dev / docs / добавление-изображений-шрифтов и файлов /

Подробнее об импорте ES7 можно узнать подробнеездесь:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Я вижу, что вы пытаетесь добавить библиотеки и ресурсы в компонент приложения, как если бы это был обычный HTML-файл, вы можетедля этого в React не нужно искать реализацию.

Не рекомендуется использовать jQuery с React, потому что вы используете jQuery для написания кода простым и быстрым способом создания сложных реализаций, теперь этисложные реализации могут быть выполнены только с помощью React и JS, для этого и предназначен React.

Теперь я понимаю, что вы можете захотеть использовать jQuery, даже если это не так, как рекомендовать, поэтому вот ссылкагде вы можете получить JQuery, чтобы установить его в качестве плагина для вашего React app

https://www.npmjs.com/package/jquery

Вы сможете импортировать его в свой компонент следующим образом: 

import $ from "jquery";

Чтобы использовать Bootstrap в вашемReact приложение, которое вы проверяете документацию реализации Bootstrap для React, response-bootstrap:

https://react -bootstrap.github.io / Getting-Start / Знакомство

...