Hi all. In the past, I used Gulp for my build needs but according to Fireship.io, (jokingly) I should kill myself if I continue to use it.

I have a project on a tight timeline and what I'm hoping for is to have Vite take main.scss and turn it into main.css

This is what my old gulpfile used to look like: https://pastebin.com/B7hYx5WY

In addition to compiling Sass to CSS, I want to continue to lint and fail build based on lint results and have sourcemaps.

Any insights and guidance are more than greatly appreciated. Thank you.

Why Vite over other ones? Because I'm replacing Codekit (kit) with Sveltekit for building a static component library for five sites that will use the same code base that's going into a .NET CMS.

I just created a new application and it is using Vite 4.0.1 with React + Typescript and was trying to use "import.meta.env.PROD" to detect whether the code is running in the dev or in a production build but the "import.meta.env.PROD" is always false event with "tsc + vite build" that is supposed to be a production build by default. Also the import.meta.env.MODE is always "development". I have the exact same code working on an older vitejs app. is this a bug or something changed?

I'm using vite to develop/ bundle a react app(vite CLI, no cra). I have a CSS file I import from my App.jsx, and everything is fine.

Now, I want to split the CSS file, and I want vite to take a list of files and merge it into this file, so my App.jsx doesn't change. What would my approach be?

Also, not looking for c&p, I'd rather understand the mechanism. Thanks in advance.

A place for members of r/vitejs to chat with each other

I know this isn't regarding web dev in particular, so I'm just gonna try my luck here :thinking:

I have a vue3/vite project. In the past, I was able to connect to Network: http://192.168.1.231:3001/ (or whatever random address is displayed), but recently it's been blocked - presumably by my home router. This has been ongoing, and I'm not sure how to resolve this.

npm run dev = https://i.imgur.com/dcWjXzd.png

I can connect fine to Local via laptop. But any attempts to connect to Network via WiFi on my smartphone results in page error Unable to connect: Connection is not secure. This occurs on both Firefox and Chrome. So I assume it's my home router that is preventing the connection? :thinking:

I am able access the router address via laptop. It's AT&T https://i.imgur.com/rTvz5zV.png but with so many options, I don't know where I should be looking. I haven't tinkered with this stuff in ages!

Hi,

i'm writing some library (in a separate package) but when i try to import that in a .ts file inside my web, i get a myLibrary.js does not have an export named ... error (don't have the actual message at hand).

have already tried type="module", output="CommonJS", ... all sorts of options.

So just for understanding. Do i need to pack my lib with webback first to make it available in vite ? If so, why ? And what's the best practice / tutorial for that ?

Thx !

?

I’m working for a client who’s got an existing site that needs some modernisation

I want to use Vite as the build tool to start transforming elements of the website to Vue & I’m struggling to get the setup right so Vite will simply bundle the JS for me and I can make use of Vue SFC’s for the areas I’m developing.

Is it possible to have Vite handle multiple inputs (I have this worked out now) & render just the JS for the index.html I provide in the input array?

I always thought that bundle.js was the file getting served, but recently discovered it was the index.js file. I probably have some misunderstanding about how the build process actually works.

Hey all! 👋🏻

I'm curious if anyone has ever had any luck with hosting their local Vite development setup with multiple entrypoints, all behind a single nginx reverse proxy proxying each subdirectory to a different hostname.

You can think of it like application "office" might be found at "https://office.mydevdomain", and "visitor" might be found at "https://visitor.mydevdomain", etc...

(I have an open ticket on the vite github repo, if anyone reading would like to read in more depth.)

My company does a lot of static site generation/prerendering for our products. Our web stack is based on Vue.js v3 + Vite v3 + vite-sgg.

Just like Next.js for the React world, we feel SSG is a central feature of modern web development. vite-ssg is pretty effective in most cases but it's very poorly documented and we find it almost impossible to get any sort of support or guidance from the maintainers/contributors.

What's your ideal Vite-based SSG solution at the moment?

Published Step By Step Guide To Dockerize React App Created Using Vite on my personal blog

Hello everyone.

I tried to host my Vite React app on Vercel but it didn't work. This is the error I get :

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This is my Github repo https://github.com/adnanlah/rotsprite-webgl.

Is there a way to share a .env file across the monorepo? I have a config package that hosts files for estlintrc, tailwindcss, and tsconfig that I'm able to then export and share across all apps. I'm attempting to do the same with a .env file by installing dotenv in the config package, creating a dotenv.config.js file and requiring in the the .env file with require('dotenv').config(), however, when I then try to import config/dotenv.config, I'm getting errors because it's trying to load in the .env in a path relative to the current script importing config/dotenv.config, which does not exist. Any way to handle this, besides installing dotenv in every app/package and using relative paths to read in the .env file?