Unable to use font css file in Reactjs - javascript

I am working with Reactjs(Nextjs),Whenever i am trying to use "css" in project then i am getting following error in my screen
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0'
How can i solve this ?
Here is my code in _app.js
import Head from "next/head";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper.min.css'
import '../styles/globals.css'
import '../styles/css/style.css'
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/jquery.mCustomScrollbar.min.css" />

The lines with :
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/jquery.mCustomScrollbar.min.css" />
should be inserted in index.html. And you should use css from cdn
ex:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Related

dynamic routes file not including css after reload page using Reactjs

I am working on Reactjs an using Nexts, Whenever i click on "dynamic routes" ([slug.js]) page then its working properly but whenever we refresh that page then css not including (design issues),How can i fix this,Here is my "document.js" code
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossOrigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#400;500;600;700&family=Darker+Grotesque:wght#300;400&family=Poppins:wght#100;300;400;500;700&display=swap"
rel="stylesheet"
/>
<Script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Here is my "_app.js" file
import "../styles/globals.css";
import "../public/Js/main.js";
import "aos/dist/aos.css";
import { useEffect } from "react";
import AOS from "aos";
import "../public/css/style.css";
import "../public/css/custom-audioplayer.css";
function MyApp({ Component, pageProps }) {
useEffect(() => {
AOS.init({
disable: function () {
var maxWidth = 800;
return window.innerWidth < maxWidth;
},
});
}, []);
return <Component {...pageProps} /> ;
}
export default MyApp;

Page not displaying properly in Reactjs

I am working with Reactjs and using nextjs framework,I am integrating/converting "index.html" to "index.js" page
Whenever i go to "About" page then "About" page is displaying fine but whenever i click again on "Home" page
then page is not showing,only loader is displaying untill i refresh page,Where i am wrong ?
Here is my _document.js
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fontawesome.css" />
<link rel="stylesheet" type="text/css" href="css/templatemo-stand-blog.css" />
<link rel="stylesheet" type="text/css" href="css/owl.css" />
</Head>
<body>
<Main />
<NextScript />
<Script src="../vendor/jquery/jquery.min.js" strategy="beforeInteractive"></Script>
<Script src="../vendor/bootstrap/js/bootstrap.bundle.min.js" strategy="lazyOnload" ></Script>
<Script src="../js/custom.js" strategy="lazyOnload"></Script>
<Script src="../js/owl.js" strategy="afterInteractive"></Script>
<Script src="../js/slick.js" strategy="lazyOnload" ></Script>
<Script src="../js/isotope.js" strategy="lazyOnload" ></Script>
<Script src="../js/accordions.js" strategy="lazyOnload" ></Script>
</body>
</Html>
)
}
Here is my _app.js file
import Script from 'next/script'
import '../styles/globals.css'
import '../public/vendor/bootstrap/css/bootstrap.min.css'
import '../public/css/fontawesome.css'
import '../public/css/templatemo-stand-blog.css'
import '../public/css/owl.css'
import jQuery from 'jquery';
import {useEffect} from "react";
import Header from '../components/Layout/Header'
import Footer from '../components/Layout/Footer'
function MyApp({ Component, pageProps }) {
return <><Header /><Component {
...pageProps} /><Footer /></>
}
export default MyApp

why is my index.html file returning a blank screen whenever i debug or preview it?

this is the app.js file
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardLayout from './layouts/DashboardLayout';
import './faithdash/scss/styles.scss';
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route component={DashboardLayout} />
</Switch>
</BrowserRouter>
);
}
this is the index.html file
ive tried everything and have used different my vscode index chrome previewer to view the index file like others but its shows a blank screen
<!DOCTYPE html>
<html lang="en">
<head>
<title> Faithpays dashboard</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
<link
href="https://%PUBLIC_URL%/evergreen.eot"
rel="font"
/>
<link
href="https://%PUBLIC_URL%/evergreen.css"
rel="stylesheet"
crossorigin="anonymous" />
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
<script src="_nav.js"></script>
</body>
</html>
Because you didn't call render function from ReactDOM.
See more here: https://reactjs.org/docs/getting-started.html

Uncaught ReferenceError: Vuetify is not defined

I install vuetify using npm install vuetify and after then I added npm install sass sass-loader deepmerge -D Then I use php artisan serve and there is nothing in the site and in the console there is an error Uncaught ReferenceError: Vuetify is not defined.Also I add vue add vuetify and the plugin file was created and dependencies was added.nothing happens.Please help me to fix this issue.
mainapp.vue
<template>
<v-app >
<Navbar />
<v-main>
<router-view/>
</v-main>
<Footer />
</v-app>
</template>
<script>
//import HelloWorld from './HelloWorld'
import Navbar from './pages/navbar'
import Footer from './pages/footer'
export default {
components: { Navbar,Footer },
name: 'App',
// components: {
// HelloWorld
// },
data () {
return {
//
}
}
}
</script>
app.js
require('./bootstrap');
window.Vue=require('vue');
import router from './router';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify);
Vue.component('mainapp',require('./components/mainapp.vue').default);
const app=new Vue(
{
el: '#app',
vuetify: new Vuetify(),
router,
}
)
welcome.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<title>Fullstack Blog</title>
<link rel="stylesheet" href="/css/all.css">
<!-- to show icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>

How to include/import custom js files into vue project?

I have downloaded html template from some site and now want to convert that whole template into vue cli project.The template has jquery and other custom js files.For jquery and bootstrap I used npm package but for other custom js I don't know how can I make it run.below is index.html file inside public folder in vue cli project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>License Renewal</title>
<!-- Stylesheets -->
<link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
<link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page-wrapper">
<div id="app"></div>
<!-- built files will be auto injected -->
</div>
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="http://maps.google.com/maps/api/js?key="></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->
<script type="text/javascript">
$('.modal').on('shown.bs.modal', function () {
$.getScript('js/nepali.datepicker.v3.min.js')
.done(function(script, textStatus) {
console.log(textStatus)
/*var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
console.log('date');
console.log(mainInput);*/
});
})
</script>
<script>
$('.motor-block').on('click',function () {
test('application');
console.log('yes');
})
function test(elID)
{
var dest = document.getElementById(elID);
$([document.documentElement, document.body]).animate({
scrollTop: $(dest).offset().top -25
}, 500);
}
</script>
</body>
</html>
below script files are those I am talking about.How can I run them?
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
below is main.js file
import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Main)
}).$mount('#app')
There are a few routes you can take here. The easiest by far would be to find the files on NPM and install them in your project, use Webpack or Gulp, to copy the files over to the public JS path that is used in Index.js. Another way is to find those files online and copy them by hand (copy whole file contents, paste to new local file) and save to the template core files public path you wish.

Categories