Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Inlining CSS and JS in HTML does not work
See original GitHub issueDescribe the bug
I am attempting to migrate my project from Parcel to Vite.
My project is a single-page application.
For easy deployment and fast startup, my project is designed to ship as a single .html file with all JS and CSS inlined in the HTML page.
The problems described here pertain to the production build for an index.html like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import './style.scss';
</style>
</head>
<body>
<script type="module">
import '/main.js';
</script>
</body>
</html>
1. @import from .scss files in <style> tags doesn’t work
With Parcel, I was able to achieve this with an inline @import for the CSS:
Note that I’m attempting to use SASS here.
Unfortunately, this does not seem to work in Vite, where the inline <style> tag appears to be handled without any module processing, based on the file extension. (?)
The resulting output from this example is e.g.:
<style>
@use "app";
</style>
So the .scss file does not get processed.
Things I’ve tried that didn’t work:
- 👎
@import url('./style.scss')(same) - 👎
<style type="sass">(same) - 👎
<style lang="sass">(probably only works for Vue)
My current workaround is to use an external CSS file.
2. import from <script> tags doesn’t work as expected
Having used an inline <script type="module">, I would expect the code within that tag to get bundled an inlined, as I was able to do with Parcel.
Instead, the inline script tag is removed from <body>, and an external script tag is inserted into <head> - this will execute before the DOM is ready, will block the page from rendering, and so on.
There is no workaround for this one - I will get an external .js file no matter what.
Summary
I wanted one HTML file, but I’m getting 3 separate assets (HTML, CSS, JS) instead.
What happens at development time isn’t important, but it doesn’t look like the production build I wanted is currently possible with Vite?
Reproduction
https://stackblitz.com/edit/vitejs-vite-gv7uz4?file=index.html
System Info
System:
OS: Linux 5.10 Ubuntu 16.04.7 LTS (Xenial Xerus)
CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Memory: 4.85 GB / 6.13 GB
Container: Yes
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.4 - ~/.npm-global/bin/yarn
npm: 8.5.5 - ~/.npm-global/bin/npm
npmPackages:
vite: ^2.9.9 => 2.9.9
Used Package Manager
npm
Logs
(reproduction provided above - let me know if you need this.)
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I think html tag is not support css preprocessor. so can’t not handle scss.
And now the syntax is not supported. so even setting
<style lang="scss">it no work.So I think it is feature request?
Right! I think your point is better. I will modify it later. Thank you.