malizhev / vite-plugin-css-auto-import Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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.
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:/.
Webpack still have a lot of users. Is there a plan of support of it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.