I am trying to load my stylesheets and js files in Meteor. I have an index.html file. This is what I was doing at first:
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
There were lots of stylesheet files and script files. This was working fine but if i wrote a url like: 'localhost:3000/manage-user/add', everything stopped working. I have read loads of answers where they have mentioned that I need to make a lib folder and in that folder, I need to make a css and a js folder, but it's not picking up my files, especially my 'style.css' file which overrides styles of bootstrap and all.
assets folder should be inside the /public folder, then try add the / to the begining of the href value.
<link href="/assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css"/>
URL can be absolute and relative.
Absolute should starts from protocol value(http://, https://, ftp:// etc) and then domain name, port, path and query part.
Relative can be started either from slash or any other character.
If URL is started from slash it's assumed its value is relative to domain's root.
If URL is started from any other character it's assumed it's value is relative to current URL(or value in tag).
Anyway value localhost:3000/manage-user/add means for browser:
"take current page's URL and append this value to its end".
So your files are tried to be fetched from something like http://localhost:3000/localhost:3000/manage-user/add
To properly add your styles.css and/or your templates/components to your app, you must register/add them as an import path to the body.js.
CSS
Go to your body.js.
Add import '/imports/ui/stylesheets/styles.css' (copy/paste this line)
JS - Templates/pages
Go to your body.js in your layouts folder.
Add import '/imports/ui/pages/[yourDirName]/[yourFileName].js'; (copy/paste this line)
BONUS Content!
JS - Components to import into your html templates (optional)
Go to your pages folder.
Select the proper directory.
Select the js file that is importing your html template file.
Import the component to the js file.
import '../../components/[yourDirName]/[yourFileName].js;
Example import '../../components/hello/hello.js';
Related
I have folder hierarchy like this
how to add css and js file in this index.jsp
browser developer tools
If you want to add css and js files inside one of the jsp files, add these inside head
For CSS
<link rel="stylesheet" href="../css/filename.css">
For JS
<script src="../js/filename.js"></script>
Here .. represents the directory above the jsp (one level up) then /js or /css will goto respective directory.
It all depends on the paths they will have from the browser's perspective. If the browser sees the hierarchy you've shown, then from any of the .jsp files in your jsp directory, you'd use
<link rel="stylesheet" href="../css/filename.css">
The .. goes up one level (from jsp to your root), and then /css goes into the css directory.
You could use root-relative URL like /css/filename.css, but that will break if you put this whole thing somewhere other than the root on the server.
See this answer for the correct way to organise your files in a Tomcat application.
The path to your CSS files should be:
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
I want manage path for JS and Css file without changing filder structure
currrenlty my path is
<link rel="stylesheet" href="#Url.Content("~/Content/newTheme/css/font.css")" type="text/css" />
But i want path Like
<link rel="stylesheet" href="#Url.Content("~/Myproject/Content/newTheme/css/font.css")" type="text/css" />
Without changing folder structure
One option is copy all files and folders in Myproject folder. But problem duplication of files.
Are you sure you have a folder name "animate.css" I can see written twice so it can be a issue. secondly if MyProject is name of your folder you don't need to write that in path.
Simply using ~ will take the root of the URL (the path you see in browser). The first one should work, just remove the duplicate animate.css from href attribute.
I use bower to require my fronted css/js dependencies, I referenced all of them from my index.html view which also include my react app bundle in this html.
For the bundle.js of my react app everything is OK and webpack does the job well.
My question is how can I automate the process of combining all the style import from bower_component directory using webpack (css + js) ?
Does a tool can go throw the index.html file and then when see the import (which in my case is something like this :
<link rel="stylesheet" href="/public/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/public/plugins/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/public/plugins/summernote/dist/summernote.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.skinFlat.css">
<script src="/public/plugins/summernote/dist/summernote.min.js"></script>
replace the content of the file using the URL of the file, moreover even if the URL is relative and defined static in expressJS.
Gulp can be the tool but it would be great if one tool can do all the job.
Gulp inject seems interesting https://www.npmjs.com/package/gulp-inject but no options for relative URL and to take only the file required in the index.html file.
I cannot use gulp and say all the js/css in the bower component because they are not all used and I don't want to more them to be able to update the component easily.
The problem here is that some views (not all of them) can't access to some css&js files(not all of them) ("404 Not found" error).
For exemple View of .../Details/Index/1 can't access to 1file css and 1file js (it can access all other files), but the View of .../Recherche/result can access to all files.
This problem happens when the user is connected and when not connected.
I didn't modifie the web.config file.
All View are related to one Layout, in there I inluded the css files:
<link href="Content/file.css" media="all" rel="stylesheet" type="text/css" />
And one last thing, all css files are in 1 folder and all js files are in 1 folder.
Start the path to the file with the tilde (~) character. Razor will converts a virtual (relative) path to an application absolute path.
<link href="~/Content/file.css" media="all" rel="stylesheet" type="text/css" />
If you are using an MVC version prior to MVC 4, you should use Url.Content helper method.
<link href="#Url.Content("~/Content/file.css")" rel="stylesheet" type="text/css" />
I've created a project using Famo.us's Yeoman generator. It creates an index.html file, a styles folder, a src folder, and a content folder. The gruntfile specifies that index.html includes all css files under the styles folder. However, I want to include a google fonts css file, by referencing it in my index.html. I can't insert this manually because grunt will overwrite my changes everytime i save a file in my project, how do I go about making grunt load my external css files/reference them in my index.html file?
Make sure you include your stylesheet outside of the <!-- build:css comments.
This works:
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />
<!-- build:css(app/) css/app.css -->
<link rel="stylesheet" type="text/css" href="styles/app.css" />
<!-- bower:css -->
Troubleshooting:
If this does not work with live-reload, try restarting the server!
Be sure to refresh page (i.e. clear cache or open developer console)
Example files:
See example files in this gist!
Explanation:
The specific Grunt task that rewrites CSS stylesheets in index.html is called cssmin, which is used in conjunction with useminPrepare and usemin.
Basically, useminPrepare writes a cssmin configration for you based on the <!-- build:css comments in your html file. See usemin docs.