REACT导入CSS和JS文件

问题描述 投票:0回答:1

我的应用程序需要有两个页面,一个登录页面和一个管理页面。两个页面使用不同的主题。我无法将这两个页面的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不是功能。

它们都不按顺序工作。

reactjs asp.net-core single-page-application
1个回答
0
投票

当您想将资源导入到您的React应用程序中时,可以使用如下所示的导入:

// Import with variable assignation

import logo from './logo.png';  

// Import without variable assignation   

import './css/index.css'

您可以在create-react-app文档中了解有关此内容的更多信息:

https://create-react-app.dev/docs/adding-images-fonts-and-files/

您可以在此处阅读有关ES7导入的更多信息:

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

[我知道您想做的是向应用程序组件中添加库和资源,就像是一个常见的html文件,您无法在React中做到这一点,您需要找到一个实现。

不建议将jQuery与React一起使用,因为您使用jQuery以简单快速的方式编写代码来创建复杂的实现,现在那些复杂的实现可以仅由React和JS来完成,这就是React的目标。

现在我知道您可能甚至不希望使用jQuery,因此建议您使用jQuery,因此,这里有一个链接,您可以在其中获得jQuery来将其安装为React应用程序的插件

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

您将能够像这样将其导入您的组件:

import $ from "jquery";

要在您的React应用程序中使用Bootstrap,请查看用于React的Bootstrap的实现文档,react-bootstrap:

https://react-bootstrap.github.io/getting-started/introduction

© www.soinside.com 2019 - 2024. All rights reserved.