Sorry to be so uninformed here, but I’m getting conflicting google foo…
I’m trying to write a JS script that imports both JS and CSS and uses JSBuild…
{{- $targetPath := (printf "js/fullcalendar-%s.js" $id) }}
{{- $opts := dict
"targetPath" $targetPath
"minify" hugo.IsProduction
"params" (dict
"id" $id
"initialDate" ($page.Date.Format $isoformat)
"initialView" $view
"data" $merged)
}}
{{- $js := resources.Get "js/fullcalendar.js" | js.Build $opts }}
{{- if hugo.IsProduction }}
{{- $js = $js | fingerprint }}
{{- end }}
<script src="{{ $js.RelPermalink }}"></script>
It’s dying when jsbuild tries to import the CSS with the error:
JSBUILD: failed to transform "js/fullcalendar.js" (text/javascript): "/Users/pst/Sites/hb-goattrails/assets/js/fullcalendar.js:9:7": Cannot import "node_modules/bootstrap/dist/css/bootstrap.css" into a JavaScript file without an output path configuredJSBUILD: failed to transform "js/fullcalendar.js" (text/javascript): "/Users/pst/Sites/hb-goattrails/assets/js/fullcalendar.js:9:7": Cannot import "node_modules/bootstrap/dist/css/bootstrap.css" into a JavaScript file without an output path configured
First off, I didn’t even realize jsbuild could handle CSS in a JS file… but that’s what the example code is suggesting that I do.
Can anyone give me a pointer? Am I using the wrong js build engine (like do I need web pack) with Hugo?
import { Calendar } from '@fullcalendar/core';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import params from '@params';
// import bootstrap stylesheets directly from your JS
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css' // needs additional webpack config!
(() => {
"use strict";
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById(params.id);
var defaults = {
plugins: [ dayGridPlugin, timeGridPlugin, bootstrap5Plugin ],
// themeSystem: "bootstrap5",
views: {
dayGrid: {
displayEventEnd: true
}
},
headerToolbar: {
left: "prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek"
},
initialDate: params.initialDate,
initialView: params.initialView,
eventOrder: "-allDay"
};
var merged = Object.assign({}, params.data, defaults);
var calendar = new Calendar(calendarEl, merged);
calendar.render();
});
})();