Skip to content

Instantly share code, notes, and snippets.

@zavan
Last active February 27, 2023 10:17
Show Gist options
  • Save zavan/a8f55043b7e197c7948ec535d36b5dd8 to your computer and use it in GitHub Desktop.
Save zavan/a8f55043b7e197c7948ec535d36b5dd8 to your computer and use it in GitHub Desktop.
Simple NPM + Vite + PostCSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Dummy eSite</title>
<!-- CSS Assets -->
<link rel="stylesheet" href="/src/styles.css">
</head>
<body>
<h1>Hello!</h1>
<!-- JS Assets -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
// Gist won't let me, but this file should be in the src/ subdirectory.
import './styles.css';
console.log('Your JS code goes here. Use ES modules import dependencies and organize your code.');
{
"name": "spillover-site-templates-roma",
"version": "1.0.0",
"description": "Spillover Roma site template.",
"author": "Felipe Zavan <[email protected]>",
"license": "UNLICENSED",
"private": true,
"type": "module",
"module": "src/main.js",
"scripts": {
"start": "vite --host",
"build": "vite build",
"preview": "vite preview",
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss-nesting": "^11.2.1",
"vite": "^4.1.4"
}
}
export default {
plugins: {
"postcss-import": {},
"postcss-nesting": {},
autoprefixer: {},
},
};
/* Gist won't let me, but this file should be in the src/ subdirectory. */
.main {
background-color: #FF0000;
h1 {
padding: 0;
}
}
import { fileURLToPath, URL } from "url";
function fullPath(path) {
return fileURLToPath(new URL(path, import.meta.url));
}
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
// So modules can be imported relative to src instead of ../../../...
"@": fullPath("./src"),
},
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment