(scss) Issues updating to 1.3

[jollydodo]

Hey!

Our website is running fine, but I really liked the restructure of the 1.3 update so that things like Hugo can be updated more easily. However, I can't seem to get the 1.3 update working. I made quite a few changes to the default doks template (which is likely the culprit), but I did follow the best practices. So only changes were made to custom scss/js and several partials were added or overwritten in the layouts/ folder.

After following the 1.3 update guide, I first get the following errors when trying to run "npm run dev"

Error: error building site: TOCSS: failed to transform "scss/app.scss" (text/x-scss): "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/assets/scss/app.scss:8:1": File to import not found or unreadable: common/variables.

I tried to debug this, so after deleting this file, it gives the same error for /doks-core and the local /app.scss. I deleted all these files to try and at least get everything to run but then I get this error:

ERROR render of "page" failed: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/_default/baseof.html:3:5": execute of template failed: template: legal/single.html:3:5: executing "legal/single.html" at <partial "head/head" .>: error calling partial: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/head.html:12:8": execute of template failed: template: partials/head/head.html:12:8: executing "partials/head/head.html" at <partialCached "head/stylesheet" .>: error calling partialCached: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/stylesheet.html:1:3": execute of template failed: template: partials/head/stylesheet.html:1:3: executing "partials/head/stylesheet.html" at <partial "head/libsass" "scss/app.scss">: error calling partial: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/libsass.html:4:30": execute of template failed: template: partials/head/libsass.html:4:30: executing "partials/head/libsass.html" at <toCSS $options>: error calling toCSS: no Resource provided in transformation ERROR render of "page" failed: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/_default/baseof.html:3:5": execute of template failed: template: faq/single.html:3:5: executing "faq/single.html" at <partial "head/head" .>: error calling partial: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/head.html:12:8": execute of template failed: template: partials/head/head.html:12:8: executing "partials/head/head.html" at <partialCached "head/stylesheet" .>: error calling partialCached: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/stylesheet.html:1:3": execute of template failed: template: partials/head/stylesheet.html:1:3: executing "partials/head/stylesheet.html" at <partial "head/libsass" "scss/app.scss">: error calling partial: "/Users/niels/webdevelopment/fablab/fablab-website/node_modules/@hyas/core/layouts/partials/head/libsass.html:4:30": execute of template failed: template: partials/head/libsass.html:4:30: executing "partials/head/libsass.html" at <toCSS $options>: error calling toCSS: no Resource provided in transformation Built in 272 ms

I hope that both are related and that it is a simple fix, but I'm running out of ideas. Any tips / guidance would be really appreciated.

(the branch 'update' features the 1.3 update changes according to the manual and nothing more). So when you clone this and try to run 'npm run dev' yo will first get the scss errors.

[h-enk]

Your assets/scss/app.scss override is not in line with the new @hyas/doks-core v1.3.0 app.scss — I will make a note in the docs!

The critical part:

// 2. Include any default variable overrides here
@import "common/colors";
// @import "common/variables";
// @import "common/variables-dark";
@import "common/variables-overrides";
@import "common/variables-custom";

Next to that some order differences in sections 5 and 6.

These changes worked for me:

app.scss

// Source: https://getbootstrap.com/docs/5.3/customize/sass/#importing

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "bootstrap/scss/functions";

// 2. Include any default variable overrides here
@import "common/colors";
// @import "common/variables";
// @import "common/variables-dark";
@import "common/variables-overrides";
@import "common/variables-custom";

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// @import "bootstrap/scss/utilities";

// 6. Optionally include any other parts as needed

// Layout & components
// @import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Helpers
// @import "bootstrap/scss/helpers";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/scss/utilities/api";

// 8. Add additional custom code here
@import "common/fonts";
@import "common/global";
@import "common/syntax";
@import "common/dark";
@import "components/alerts";
@import "components/buttons";
@import "components/callouts";
@import "components/expressive-code";
@import "components/code";
@import "components/comments";
@import "components/details";
@import "components/forms";
@import "components/images";
@import "components/mermaid";
@import "components/modals";
@import "components/search";
@import "components/tables";
@import "components/tabs";
@import "layouts/footer";
@import "layouts/header";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/sidebar";

/** Import KaTeX */
// @import "katex/dist/katex";

/*
body {
  background-color: {{ site.Params.doks.backGround }};
}
*/

// 9. Custom styles
@import "common/custom";

// 10. photoswipe 
@import "flickr-justified-gallery/dist/fjGallery";
@import "photoswipe/dist/photoswipe";
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin";

[h-enk]

Added Update overrides

[jollydodo]

Thank you so much for the quick reply and help again! That worked like a charm.