How do I import css from a node modules without processing/minify it?

[jasekiw]

I have an import line like this in one of my js files

import 'formiojs/dist/formio.full.min.css';

I get the following warning when running build

rendering chunks (5)...warnings when minifying css:
▲ [WARNING] Expected identifier but found "*" [css-syntax-error]

    <stdin>:4:42619:
      4 │ ...-default .formio-dialog-buttons{*zoom:1}.formio-dialog.formio-di...
        ╵                                    ^

It appears the css provided from this particular module has some invalid css. However this exposed to me the problem that it is trying to minify and already minified css file. How can I instruct vite not to minify this css file and import it without processing it? I don't want to spend extra time minifying a file that is already processed by the package.

[ShayDavidson]

Running into the same issue. I have a library that omits invalid CSS and PostCSS refuses to compile it. However it's fine when it's loaded directly in the browser, which is fine by me.

[jasekiw]

@ShayDavidson I was able to workaround it with using the copy plugin to copy the css and manually link it in the html.

import { defineConfig } from 'vite';
import {viteStaticCopy} from 'vite-plugin-static-copy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [  viteStaticCopy({
      targets: [
       {src: 'node_modules/formiojs/dist/formio.full.min.css', dest: 'formio'}, // copies into the dist/formio folder
      ]
    })
  ]
});