Skip to content

Instantly share code, notes, and snippets.

@bwindels

bwindels/foo.css

Last active April 8, 2022 09:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bwindels/97db6b931fb6cae33c35be70f244f337 to your computer and use it in GitHub Desktop.
Save bwindels/97db6b931fb6cae33c35be70f244f337 to your computer and use it in GitHub Desktop.
Download ZIP
attempt at vite virtual css modules
Raw
foo.css
body {
color: red;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="module">
import "@theme.css";
</script>
</head>
<body>
</body>
</html>
Raw
package.json
{
"name": "vite-resolve-dev-test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"vite": "^2.9.1"
}
}
Raw
vite.config.js
const {defineConfig} = require('vite');
const virtualModuleId = '@theme.css'
const resolvedVirtualModuleId = '\0' + virtualModuleId
const examplePlugin = () => {
return {
name: 'test-css-import',
resolveId(id) {
console.log("trying to resolve", id);
if (id === virtualModuleId) {
return resolvedVirtualModuleId
}
},
async load(id) {
if (id === resolvedVirtualModuleId) {
return `@import 'foo.css';`;
}
}
}
}
export default defineConfig(({mode}) => {
return {
plugins: [examplePlugin()],
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment