malizhev / vite-plugin-css-auto-import Goto Github PK

Webpack still have a lot of users. Is there a plan of support of it?

Thanks for this cool plugin, it would definitely be a time saver.

However on Windows, the current import logic does not work. The logic to lookup the styles for the virtual id expects the URL to start with a / and then some path, but on Windows, those absolute paths start with a drive identifier, e.g. C:/.

Tested on [email protected] with [email protected]

vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import cssAutoImport from 'vite-plugin-css-auto-import';

export default defineConfig({
  plugins: [solid(), cssAutoImport()]
})

Example.tsx

export function Layout({ children }: ParentProps {
  return <div class="foo">{children}</div>;
}

Example.module.css

.foo {
  color: red
}

Rednered result

 <div class="foo">Hello world</div>

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/@id/__x00__virtual:css-auto-import/f75ed785fd956/originalModuleId=/home/experements/temp/src/example/Example.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "\u0000virtual:css-auto-import/f75ed785fd956/originalModuleId=/home/experements/temp/src/example/Example.css"
const __vite__css = "._foo_r1pu1_1 {\n  color: red\n}"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

But all works fine after next changes

export default defineConfig({
-  plugins: [solid(), cssAutoImport()]
+  plugins: [cssAutoImport(), solid()]
})

result:

<div class="_foo_r1pu1_1">Hello world</div>

Thanks for the fix in #1 , this definitely helped. However now SASS compilation fails during the import of those auto-imported scss files.

It can't find the @import-ed stylesheets that are referenced in my stylesheets using relative paths. So something about the working directory for sass compilation inside this plugin must be wrong i guess.

Example error message:

10:58:03 [vite] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "../style/variables.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  virtual:css-auto-import\98ec907e6be21\originalModuleId=<stylesheet>.scss 1:9  root stylesheet

After uninstalling, re-download vite-plugin-css-auto-import, index.module.css the component in the automatic import failed, re-create a new component.