Closed eidens-design closed 2 years ago
Glad you like the kit! I can't see an obvious error, but it is hard to judge without an example, can you create a repository demonstrating the issue?
Maybe I explained it weirdly. There are css files generated, that have JS content. And that messes up the manifest, so Kirby won't load. https://github.com/eidens-design/goeran-eidens
See the public/dist contents.
I include the js files through my Kirby Layout now, but they are not minimized obviously. I'm sure it worked at some point. Maybe something I did messed it up.
Thanks, I just did a quick test and the issue seems to be related to the vite-plugin-sass-glob-import
plugin. I'm not familiar with it, but when the plugin is disabled no anti-spam[hash].css
file was created. So maybe you can open an issue there?
I just removed all globbing related things, and it is still building the files that way. Pushed it to the repo for you to check out.. :/
Okay my bad, the plugin wasn't the issue. I did some more testing and it seems that the problem is your way of mixing ES modules and normale js files. For example the index.js
module imports another file (like /js/anti-spam.js
) but it doesn't import anything from it. I don't think vite is meant to work this way and therefore results in weird quirks.
I've you rewrite your anti spam as a module that exports something like this:
// js/anti-spam.js
function decode(a) {
return a.replace(/[a-zA-Z]/g, function (c) {
return String.fromCharCode(
(c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26
);
});
}
function openMailer(element) {
var y = decode(element.dataset.key);
element.setAttribute("href", y);
element.firstChild.nodeValue = "E-Mail-Software öffnet sich";
}
export function antiSpam() {
var emailField = document.getElementById("email");
if (emailField !== null) {
emailField.href = "#";
emailField.innerHTML = "bitte klicken";
emailField.addEventListener(
"click",
function () {
// anonyme Funktion
openMailer(emailField);
},
false
);
}
}
and than import it and use it:
import "/scss/styles.scss";
import { antiSpam } from "./js/anti-spam";
document.addEventListener("DOMContentLoaded", antiSpam);
the bundle works as expected. So if you want to use vite you should only use ES modules.
Oh that makes sense!
Hey, love the kit. I'm having issues building the site, when I start including Javascript files. I import them in the entry point index.js file and run the build command. For some reason it renames the shared.css file that is generated into one of the JS files I import in my index.js file
/* Entry point / import '/scss/styles.scss';
import '../public/js/anti-spam';
Generates a shared.js file, but also a anti-spam.css file (with hashes of course, but still, why does it create a CSS file from it? This is not a file in the template dir) and NO shared.css file.
And this: import '../public/js/anti-spam';
/* Entry point / import '/scss/styles.scss';
Generates a shared.js file which includes styles.js which has the contents of anti-spam.js Am I doing something incredibly obviously wrong here?