Problem with importing styling from npm package

[wa1id]

Hi,

I'm trying to import styling from another npm package (https://www.npmjs.com/package/react-flatpickr#installation) but it doesn't seem to work.

import "flatpickr/dist/themes/material_green.css";

Something I am missing in the vite build?

import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // includes app env settings into process.env;
  // Only settings starts with `HYVA_` works
  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), ['HYVA_']) };

  return {
    envPrefix: 'HYVA_',
    build: {
      cssCodeSplit: false,
      outDir: '../view/frontend/web',
      emptyOutDir: true,
      lib: {
        formats: ['es'],
        entry: 'src/main.jsx',
        fileName: (format) => `react-checkout.${format}.min.js`,
        name: 'react-checkout.js',
      },
    },
    esbuild: {
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
      jsxInject: `import { h, Fragment } from 'react'`,
    },
    server: {
      proxy: {
        '/backend': {
          target: process.env.HYVA_BASE_URL || 'https://demo.hyva.io',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/backend/, ''),
        },
      },
    },
    plugins: [react()],
  };
});

EDIT: I can inject the css with js, not sure if this is the right approach

import materialGreenCSS from 'flatpickr/dist/themes/material_green.css';

function App() {
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = materialGreenCSS;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  // Rest of your app components
}

[rajeev-k-tomy]

Where did you try to import this?

I assume you are using 2.0-develop in your project since you mentioned vitejs. You can see that in the reactapp/src/main.jsx file (this is entry point compoent), we have a css import there. In ViteJs, an import like that should work without any problem.

You can also try to use the src/index.css file which is already imported via main.jsx file. You can use @import commands there as you see examples of tailwindcss imports.

[rajeev-k-tomy]

Are you still facing the problem?