So for example say I installed something:
npm install --save something
and it downloads into
./node_modules/something/
and it has a folder in there perhaps called styles and in that folder you have something.css. How would I include that css file in my html document (if my html document was along-side the node-modules folder?
I mean I could do this in my html head:
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
But it feels wrong to go dig in your node_modules directory for stuff. Especially if the html document perhaps needs to get minified and then thrown into some ./dist/ directory. Because then the path to something.css is off..
Isn't there a way to simply just go:
<link rel="stylesheet" href="something.css" type="text/css" media="screen" />
in your html document - regardless of where it's sitting in your project structure - and it'll just know where to go find that css file?
There is a package for this called npm-css
In webpack you can require css like require('bootstrap.css'), this is why installing css via npm quite useful
if you don't have it, you can create a npm script task that would require (with fs.readFile) all the css files from the node_modules, compile them into single file (which is what npm-css does)
Actually there's no need to reference the css files explicitly in your html head.
Because you've already involved the css library via npm ,once you run npm start to run your project , Node.js will load all the node_moudules which also includes the css libraries you need.
Depending on which module loader you are using . For example Webpack
then please read this link https://github.com/JedWatson/react-select/issues/176
Otherwise in your server you need to have node_modules as static file directory and then you can safely do
<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" />
and it correct no harm in that
Related
My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");
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.
Hope you can help me , I cant seem to find an installation file for jasmine.
I want to learn how to use it, but i can't understand the download and installation process , neither can I find the Zip folder.
Thanks ,
jasmine is available as a npm package and as a standalone package here. In the standalone version you can find examples how to use it.
Even though this one has been answered, here are the steps I took to successfully set up Jasmine on my local box.
Clone Jasmine - git clone https://github.com/pivotal/jasmine.git
Create a Jasmine directory in your project - mkdir my-project/jasmine
Move latest dist to your project directory - mv jasmine/dist/jasmine-standalone-2.0.0.zip my-project/jasmine
Change directory - cd my-project/jasmine
Unzip the dist - unzip jasmine-standalone-2.0.0.zip
Add the following to your HTML file:
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>
I've submitted a PR to the main project for this to be added to the README.