hello everyone when trying to build web version it's not working the styles are not applied
i'm using vite to do this
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import * as esbuild from 'esbuild';
import { readFileSync } from 'fs';
import vitePluginRequire from "vite-plugin-require";
const extensions = [
'.mjs',
'.web.tsx',
'.tsx',
'.web.ts',
'.ts',
'.web.jsx',
'.jsx',
'.web.js',
'.js',
'.css',
'.json',
];
const rollupPlugin = (matchers: RegExp[]) => ({
name: 'js-in-jsx',
load(id: string) {
if (matchers.some((matcher) => matcher.test(id)) && id.endsWith('.js')) {
const file = readFileSync(id, { encoding: 'utf-8' });
return esbuild.transformSync(file, { loader: 'jsx', jsx: 'automatic' });
}
},
});
export default defineConfig({
root: __dirname,
cacheDir: './.vite',
define: {
global: 'window',
process:{
env:""
},
__DEV__:true
},
resolve: {
extensions,
alias: {
'react-native': 'react-native-web',
},
},
build: {
reportCompressedSize: true,
commonjsOptions: { transformMixedEsModules: true },
outDir: './dist/web',
rollupOptions: {
plugins: [rollupPlugin([/react-native-vector-icons/])],
},
},
server: {
port: 4200,
host: 'localhost',
fs: {
allow: ['..'],
},
},
preview: {
port: 4300,
host: 'localhost',
},
optimizeDeps: {
esbuildOptions: {
resolveExtensions: extensions,
jsx: 'automatic',
loader: { '.js': 'jsx' },
},
},
plugins: [react(), nxViteTsPaths(), vitePluginRequire()],
});
it's working on expo but on my side i'm not using expo i wonder how expo handle this behind the scene