How do I configure parcel so that I get a single output CSS file? I am using version 2, and it seems that the default is to output a separate CSS file to dist for each stylesheet referenced in the HTML file. For instance, with this test.html file:
<html>
<head>
<link rel="stylesheet" href="./a.css">
<link rel="stylesheet" href="./b.css">
</head>
</html>
running parcel build test.html outputs two css files under "dist". Is there a way to make it output one combined file?
You can use the #import at-rule to combine multiple css files into a single bundle (see documentation).
For example, you could have an index.css with this content:
#import "a.css";
#import "b.css";
...and then reference index.css in your index.html file:
<html>
<head>
<link rel="stylesheet" href="./index.css">
</head>
</html>
See this example repo.
Edit:
Another way to achieve this goal, if your app uses javascript, is to do the css imports from a javascript file. So your html file would look like this:
<html>
<head>
<script src="./index.js" type="module"></script>
</head>
</html>
...and your index.js file would look like this:
import "./a.css";
import "./b.css";
// The rest of your app...
Related
Getting page live on GitHub.
this was when it didn't work:
<link rel="stylesheet" href="/style.css">
<script defer src="/script.js"></script>
this is now, when it works:
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
What is the difference? Isn't that the same?
Not exactly. the / in the script.js tells where to find the file. / is telling it the "root" of the file system, while script.js is telling it relative to this file and "beside" it.
If your html/css/js files are in the same folder, that doesn't mean that / is pointing to that folder.
What you can do is find out where it points to and use that in your link and script tags. For example:
<link rel="stylesheet" href="/public/style.css">
<script defer src="/public/script.js"></script>
Passing relative addresses might become problematic in the future. Specially if you use routing in your application.
Is it possible to merge JS files (or CSS files) with parcel ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/aos.js"></script>
<script src="/js/club.js"></script>
</head>
<body>
</body>
</html>
When I run
parcel build js.html
I got 2 minified .js files into /dist
Is there a way to get one single file ?
regards
I don't think there's currently a config-driven way to get parcel to do this, but if your project can tolerate using modules (and if you have a choice - i.e. you wrote both aos.js and club.js), I would highly recommend this to avoid bugs that can come with global variables), then you can have your html reference a single index.js file, which then imports all of it's dependencies, like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/index.js" type="module"></script>
</head>
<body>
</body>
</html>
Note the type="module" property in the script tag - see documentation
js/index.js
import "js/aos.js"
import "js/club.js"
I am new to web development and couldn't find a clear answer.
Is it possible to use Bootstrap in Vapor with Swift 3?
Yes, you can use Bootstrap. You will either:
Add the CDN links to your template files, i.e. .leaf files, which are in the Resources/Views/ folder, or
Download the Bootstrap files and add the CSS, JS, fonts, etc. to the Public/ folder which can be accessed by all the pages.
For the first suggestion, you could add the CDN links to your base.leaf, like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
For the second suggestion, you would place the files in here:
Then access the files like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/{CSS-FILE-NAME}">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="/{JS-FILE-NAME}"></script>
</html>
I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923
ASP.net MVC 2 does rewrite all your relative urls in the <link> tag to the full relative path, which is good but it only works for URLs written in the <link> tag only, not <script> tags or any other elements.
Create an MVC 2 web application
create any controller and a view for it
inside the view create a <link> tag like this <link href="test.xml" type="text/css"/>
run your application, navigate to the view you created and then view source
you will find that MVC has rewritten your url in tag to full url like:
<link href="../Views/Home/Text.xml" type="text/css" />
i know that this file is in the Views folder and can't be viewed due to the web.config file that blocks any requests to files there, but thats not my problem
How can i get MVC to rewrite all urls not only in the <link> tage ?
Any help would be appreciated.
This happens because your <head> tag has a runat="server" attribute (a nasty heritage from WebForms). Remove it and no rewrites will happen. Also instead of:
<link href="test.css" type="text/css" />
you should always use Url helpers when dealing with urls:
<link href="<%= Url.Content("~/test.css") %>" type="text/css" />
You should not leave automatic rewrites to happen, always use Url.Content for linking static resources.
perhaps you have already tried something like this
<head runat="server">
<link href="test.xml" type="text/css"/>
<script src="<%= ((WebFormView)this.ViewContext.View).ViewPath.Substring(1,
((WebFormView)this.ViewContext.View).ViewPath.LastIndexOf('/')) %>test1.xml" type="text/javascript"></script>
</head>
renders html as
<head>
<link href="Views/Shared/test.xml" type="text/css" />
<script src="/Views/Home/test1.xml" type="text/javascript"></script>
</head>