Vite with multiple CSS and JS files
This is an exploration on how to get Vite to work with multiple inputs and multiple outputs.
npm install
npm run build
I have an application that hosts multiple websites, each with their own CSS file. This is handy for traditional server apps - Express, Laravel, Ruby on Rails, etc..
Put all your targets/entry points into the index.html
file, like so. The file is not meant to be viewed, but serve as a single entry point for the vite dev server so you can still run a single vite
command.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles/one.styl" />
<link rel="stylesheet" href="./styles/two.css" />
<link rel="stylesheet" href="./styles/three.scss" />
</head>
<body>
<script type="module" src="./scripts/scripts.js"></script>
<script type="module" src="./scripts/backend.js"></script>
<script type="module" src="./scripts/viewer.js"></script>
</body>
</html>
The Running vite
will spin up the dev server. You then will need to manually include the /@vite/client
js into your application while in development mode, as well as any assets you'd like to be live reloaded. See the vite docs for more on this.
The build.js
script will crawl your index.html
for all scripts and stylesheets and then pass each of those to the rollup config via the input option.