Parcel: [RFC] A way to include stylesheets/scripts in html without bundling them
RFC
Right now, Parcel will attempt to bundle all files referenced in <link href=""/> or <script src=""> tags in your html.
I think it would be useful to have a way to have Parcel ignore some linked files. Specifically, cases where you are building or otherwise sourcing stylesheets separately from your Parcel build, but served from the same folder (or folder tree) as the bundled files. (Files served from other domains or referenced with https:// are already ignored.)
💁 Possible Solution
A possibly naive solution might be to add an identifying character (such as a "#") to the start of any paths/files Parcel should ignore, e.g.:
<html>
<head>
<link href="#/bootstrap.css" />
</head>
</html>
Parcel would simply strip the "#" out when building.
Another possible solution would be ignore comments:
<html>
<head>
<!-- parcel-ignore -->
<link href="/bootstrap.css" />
<!-- parcel-ignore-end -->
</head>
</html>
I really don't have an opinion on the specific identifying character or comment format, these were just the first that I thought of to get the idea down.
🔦 Context
I came across this situation while attempting to work around using bootstrap.scss in a project with css-modules. More on that here. However, another reason might be needing to share a local stylesheet between the front and backend, and have it cache for both. You might do this if you have something like a custom Bootstrap build used on all pages (mostly rendered by the backend), including just a single page built with Parcel.
samsch
All 8 comments
I really like the #/ syntax proposal, it's clean and easy to parse 👍.
fathyb
on 28 Mar 2018
I like this, I think it would be super useful
juank11memphis
on 29 Mar 2018
A way to have Parcel ignore some linked files is needed.
However, I don't think it is a good way to add info in HTML files for this. Just keep HTML for you business, without anything for building.
Consider other ways，maybe:
- Add
.parcelignoreto tell parcel to ignore some paths - Add option for this，like
--ignore <path>orparcel: { ignore: [] }in package.json
teabyii
on 30 Mar 2018
I had a need to ignore some script tags that were pointing the absolute path and found this issue.
For anyone looking to solve this problem I created a plugin, it allows for the use of the # prefix as described above.
https://github.com/Joe-Withey/parcel-plugin-html-root-syntax
Joe-Withey
on 17 Jun 2019
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.
![stale[bot] picture](https://avatars3.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 17 Jan 2020
@Joe-Withey
The plugin doesn't work for me (with parcel 1.12.4), there is an error:
‼ Plugin parcel-plugin-change-file failed to initialize: ReferenceError: configFilePath is not defined
For my need, I found the following solution:
Instead of
<link rel="icon" href="/favicon.png">
I write
<script>document.write(`<link rel="icon" href="/favicon.png">`)</script>
Not good, but works.
RussCoder
on 21 Jan 2020
Could a member/author close either this issue with wontfix or add it a roadmap, and maybe add a comment for whether this feature will exist in v2?
samsch
on 20 Jul 2020
I think something like <link href="/bootstrap.css" data-parcel-ignore/> (the attribute would be removed by Parcel) or
<script data-parcel-ignore>
// ...
</script>
would make sense
mischnic
on 20 Jul 2020
Related issues
will-stone
·
3Comments
devongovett
·
3Comments
dsky1990
·
3Comments
urbanhop
·
3Comments
mnn
·
3Comments
Most helpful comment
A way to have Parcel ignore some linked files is needed.
However, I don't think it is a good way to add info in HTML files for this. Just keep HTML for you business, without anything for building.
Consider other ways，maybe:
.parcelignoreto tell parcel to ignore some paths--ignore <path>orparcel: { ignore: [] }in package.json