I have an HTML Template with CSS and JS. I wanted to import it in SvelteKit.
Adding HTML and CSS is pretty straightforward. When it comes to JS, there are problems.
As far as I have tested with the browser, The imported JS code works, but it fails to affect the DOM.
Ex. console.log works, but adding bootstrap.js or slick.js do not work. Also, custom JS written is not loading. This means there is no issue with the directory.
This is how I have imported CSS and JS in Svelte.
<svelte:head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/isotope.pkgd.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/script.js"></script>
</svelte:head>
Is there another way to import external JS to Svelte files, a way where the JS will affect the DOM?
For global scripts, you can add them to your app.html or index.html in your SvelteKit project, just like how you would with a normal HTML webpage:
src/app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Metadata such as title or description -->
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<!-- Your CSS / JS globally -->
<link rel="stylesheet" href="https://some-cdn.com/css/bootstrap.min.css" />
<script src="https://some-cdn.com/js/script.js"></script>
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
HOWEVER, it seems you're importing them from an absolute URL. If this is located inside the /lib folder, you can import them using a tag in your +layout.svelte:
<script>
import "$lib/css/bootstrap.min.css"
// you can do the same with JavaScript
</script>
A very common scenario, however, is that they are in node_modules. To import these, you can import them from the module:
<script>
import "module/style.css"
</script>
If they are in your static folder, you can use app.html to import them as shown in the first example.
Since you're using bootstrap, I would recommend to use svelte-add/bootstrap and import any necessary JS in app.html using a CDN
Related
HELP ME PLEASE 🙏🙏🙏🙏🙏
im new into inertia.js
CSS FILE WORKING BUT JS FILE NOT WORKING
iam using inertia.js with laravel 9 with vue.js-3
using admin html template im bulting admin dashboard but im facing problem with js file it was not working but when i used normal laravel 9 with blade.php concept it work perfectly.
so i tryied from 2 days with different paid admin templets but it was not working
help me to fix it
i tried below methods but not working
MY
my code
APP.BLADE.PHP FILE
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<!-- //js -->
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
<!-- Scripts -->
#routes
#vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
I TRYID THIS METHOD ALSO
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>
METHOD 2
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
I have solution to this, so rather than adding the js and css in the app.blade.php file, move asset folder resources folder.
Import the all css file in app.css like as
//resources/css/app.css
#import '../assets/css/dashlite.css?ver=3.1.1';
#import '../assets/css/theme.css?ver=3.1.1';
same import the all js file in app.js like as
//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
Now in app.blade.php add css and js inside the vite directive
#vite(['resources/js/app.js', 'resources/css/app.css',
"resources/js/Pages/{$page['component']}.vue"])
May this will help you. Happy coding
I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
There is a project that I am trying to rebuild from scratch using React from vanilla JS. For the home path route, JQuery, scrollReveal(external source) and one custom JS file(stored under src directory) are required. As the code snippet shown below, the custom JS file should be executed last(following the order of source code). However, the custom JS file is never executed using "src=./carousel"(path: src/components/home/carousel/index.js). If I switch it to src={require("./carousel")}, it will be executed before external sources are loaded up and the error message will be thrown.
The original file structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- layout -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="./carousel/index.js"></script>
</body>
</html>
The React component
import React from "react";
import "./Home.css";
import { Helmet, HelmetProvider } from 'react-helmet-async';
import ShowCase from "./ShowCase";
import BookCarousel from "./BookCarousel";
import Testimonial from "./Testimonial";
import SignUp from "./SignUp";
import Contact from "./Contact";
const Home = () => {
return (
<HelmetProvider>
<ShowCase />
<BookCarousel />
<Testimonial />
<SignUp />
<Contact />
<Helmet>
<script defer src="https://code.jquery.com/jquery-1.12.4.min.js" type="application/javascript"></script>
<script defer src="https://unpkg.com/scrollreveal" type="application/javascript"></script>
<script defer src="./carousel/index.js" type="application/javascript"></script>
</Helmet>
</HelmetProvider>
);
};
export default Home;
What's the React way of rewritting the code? I've implemented react-helmet-async and I thought this is the fix. As it turned out, the problem wasn't solved this way. Is there anything that I am missing and misunderstood about React here?
Quick update:
I moved the custom JS file under the public directory(path: public/carousel.js) and referenced it using src="./carousel.js" inside script tag and it works!!!. But now I have two questions:
Is it the React way of doing things?
Since this custom JS file is mainly used for this component, won't it be nice to place it together with the component? If so, is there a legit way to do it in React?
I'm very new to Vue and i created a navbar component that i want to load.
Here is my code:
component.vue
<template>
<html>
<head>
...
<link href="https://fonts.googleapis.com/css?family=Gudea:400,700" rel="stylesheet">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme Styles -->
<link href="assets/css/flatifytheme.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
...
</head>
<body>
...
<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/waves/waves.min.js"></script>
<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
<script src="assets/plugins/switchery/switchery.min.js"></script>
<script src="assets/plugins/pace/pace.min.js"></script>
<script src="assets/js/flatifytheme.min.js"></script>
</body>
</html>
</template>
The assets directory is in the same folder as the component.
Now the problem is that i have a lot of <link href=''> and <scripts> tags that load js and css files of the theme i'm using for the navbar and i don't know where to put them in the component, so i keep getting the following error:
This relative module was not found:
* ./components/testComponent in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
What does this error mean? How can i fix it?
There are two ways of doing this:
Either these are global files in your project
load the remote files (google fonts any http files) directly in your index.html
load the project files via the bundler in your main.js or App.vue
with import '#/assets/plugins/bootstrap/css/bootstrap.min.css' and so on...
Or, these are local files that need to be loaded in specific components
load the remote files (google fonts or any http files) with vue-meta plugin which helps your create links, script and other HTML tags on-the-fly in the head tag https://vue-meta.nuxtjs.org/api/#link
load the project files with import '#/path/to/js/file' for JS files or for CSS:
<style>
#import '#/path/to/js/file';
</style>
Use #import in the style tag to import CSS-files.
#import './assets/plugins/font-awesome/css/font-awesome.min.css'
Also the paths to the files are incorrect, use ./.
./assets/plugins/jquery/jquery-3.1.0.min.js
So I have this theme that I usually use, it's a folder containing all the files, such as the assets, the html pages etc etc.
And if I start the index page from there and I click a menu item, wen can clearly see that the animation works perfectly.
However, as soon as I add the same CSS and JS which that page uses, this is how it starts acting.
You can't see it but I'm clicking each item, and it doesn't animate the menu.
It's also missing some icons which you can see if you compare the two.
Now here is what's interesting..
It works PERFECTLY if I change the render-mode to static rather than ServerPrerendered here
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
But if I do that we have this issue..
Rendering server components from a static HTML page isn't supported.
The way I add the HTML is by doing this.. I go into the _Host.cshtml file and at the top in the tags like so
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />
<link href="assets/css/site.css" rel="stylesheet" />
<!-- Articles CSS -->
<link type="text/css" rel="stylesheet" href="assets/plugins/dataTable/datatables.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/summernote/summernote.min.css">
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Main CSS -->
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
And the same goes for the JS files, but I do it before the tag like so..
<script src="_framework/blazor.server.js"></script>
<!-- Footer Script -->
<!--================================-->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.js"></script>
<script src="assets/plugins/popper/popper.js"></script>
And it can obviously find some of it because it keeps the same general style, and when I render it using "static" as I mentioned before, it works just fine. It's almost as if it's rendering something too fast.
Where did I go wrong on this?
I think that's now easier to achieve with the Net5. You can add this JavaScript module to your .NET library as a static web asset (wwwroot/exampleJsInterop.js) and then import the module into your .NET code using the IJSRuntime service:
await jsRuntime.InvokeAsync<JSObjectReference>("import", "./_content/MyComponents/exampleJsInterop.js");
The “import” identifier is a special identifier used specifically for importing a JavaScript module. You specify the module using its stable static web asset path: _content/[LIBRARY NAME]/[PATH UNDER WWWROOT].
Learn more about it here