$assets-dir logic in fonts.scss is causing preview and build to break

[geealbers]

Discussed in https://github.com/thegetty/quire/discussions/669

As I note in the discussion, the problem stems from the following bit of SCSS pushed to quire-starter-default with 25dec11 that was meant to produce different font file path for screen and pdf. Instead, the result is that stylesheets aren't loading/reading on quire preview and quire build doesn't work.

@media screen {
  @import "assets-dir"
}
@media print {
  @import "assets-dir-print"
}

---

^{Originally posted by **chrisdaaz** February 18, 2023} I just installed [1.0.0-rc.3](https://www.npmjs.com/package/@thegetty/quire-cli/v/1.0.0-rc.3) and started a demo project, but I'm having problems rendering the default stylesheets for the Quire theme. I'm on Windows 11 using Quire with WSL2 Ubuntu.  I'm seeing this error in the JS Console: ``` [vite] Internal Server Error [sass] Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet at Object.wrapException (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:1250:17) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72193:23 at _wrapJsFunctionForAsync_closure.$protected (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3841:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:28694:12) at Object._asyncStartSync (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3805:20) at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72199:16) at _EvaluateVisitor2.visitVariableExpression$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72173:19) at VariableExpression0.accept$1$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99886:22) at VariableExpression0.accept$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99889:19) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:76384:44 handleMessage @ client.ts:249 reload-client.js:21 [11ty][01:57:57.410 UTC] Connected application.scss:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/x-scss". Strict MIME type checking is enforced for module scripts per HTML spec. ```

Full Log

```sh chris:~/quire$ quire --version 1.0.0-rc.3 chris:~/quire$ quire new demo-rc3 [CLI:quire] init-starter project root: "demo-rc3" starter: "https://github.com/thegetty/quire-starter-default" demo-rc3 set to use quire-11ty@1.0.0-rc.3 [CLI:quire] installing quire-11ty@1.0.0-rc.3 into demo-rc3 [CLI:quire] installing dev dependencies into quire project chris:~/quire$ cd demo-rc3/ chris:~/quire/demo-rc3$ quire preview [CLI] running eleventy using lib/11ty cli [CLI:11ty] running eleventy serve [quire] DEBUG Figures:ImageProcessor inputRoot: /home/chris/quire/demo-rc3/content/_assets/images outputRoot: /home/chris/quire/demo-rc3/_site [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-mother-a.jpg [quire] DEBUG Figures:Figure processing annotation image figures/lange-mother-b.jpg [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-mother-b.jpg [quire] DEBUG Figures:Figure processing annotation image figures/lange-mother-c.jpg [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-mother-c.jpg [quire] INFO Figures:IIIF:Manifest Generated manifest for figure "mother-variants" [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/evans-fields-family-a.jpg [quire] DEBUG Figures:Figure processing annotation image figures/lange-layers/original-label.png [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/original-label.png [quire] DEBUG Figures:Figure processing annotation image figures/lange-layers/additional-label.png [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/additional-label.png [quire] DEBUG Figures:Figure processing annotation image figures/lange-layers/scratches.png [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/scratches.png [quire] DEBUG Figures:Figure processing annotation image figures/lange-layers/thumb.png [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/thumb.png [quire] DEBUG Figures:ImageProcessor processing inputPath: /home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/base.jpg [quire] DEBUG Figures:ImageTiler tiling '/home/chris/quire/demo-rc3/content/_assets/images/figures/evans-fields-family-a.jpg' [quire] DEBUG Figures:ImageTiler tiling '/home/chris/quire/demo-rc3/content/_assets/images/figures/lange-mother-a.jpg' [quire] DEBUG Figures:ImageTiler tiling '/home/chris/quire/demo-rc3/content/_assets/images/figures/lange-layers/base.jpg' [quire] INFO Figures:IIIF:Manifest Generated manifest for figure "mother-annotations" [quire] INFO Figures:IIIF:Manifest Generated manifest for figure "cat-2" [quire] INFO Figures:IIIF:Manifest Generated manifest for figure "cat-1" [quire] INFO Figures Processing complete [quire] ERROR transforms:pdf:writer Eleventy transform for PDF error compiling SASS. Error message: Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ content/_assets/styles/fonts.scss 13:15 font() content/_assets/styles/fonts.scss 23:8 @import content/_assets/styles/application.scss 5:9 root stylesheet ↘ _site/ -- -- -- → about/index.html content/about.md 30.6kB -- → bibliography/index.html content/bibliography.md 30.8kB -- ↘ catalogue/ -- -- -- → 1/index.html content/catalogue/1.md 55.6kB -- → 2/index.html content/catalogue/2.md 49.1kB -- • index.html content/catalogue/index.md 35.9kB -- → contents/index.html content/contents.md 40.0kB -- → contributors/index.html content/contributors.md 31.6kB -- → essay/index.html content/essay.md 62.6kB -- → intro/index.html content/intro.md 40.9kB -- → pdf-epub-copyright/index.html content/pdf-epub-copyright.md 26.3kB -- → pdf-epub-half-title/index.html content/pdf-epub-half-title.md 25.1kB -- → pdf-epub-title/index.html content/pdf-epub-title.md 25.3kB -- • index.html content/index.md 30.1kB -- [11ty] Benchmark 565ms 9% 13× (Configuration) "epub" Transform [11ty] Benchmark 609ms 10% 13× (Configuration) "html" Transform [11ty] Copied 108 files / Wrote 13 files in 5.74 seconds (441.5ms each, v2.0.0) [11ty] Watching… [11ty] Server at http://localhost:8080/ (!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling. [sass] Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet 3:10:40 PM [vite] Internal server error: [sass] Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet Plugin: vite:css File: /home/chris/quire/demo-rc3/_site/_assets/styles/fonts.scss:13:15 Error: Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet at Object.wrapException (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:1250:17) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72193:23 at _wrapJsFunctionForAsync_closure.$protected (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3841:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:28694:12) at Object._asyncStartSync (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3805:20) at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72199:16) at _EvaluateVisitor2.visitVariableExpression$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72173:19) at VariableExpression0.accept$1$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99886:22) at VariableExpression0.accept$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99889:19) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:76384:44 3:10:45 PM [vite] Internal server error: [sass] Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet Plugin: vite:css File: /home/chris/quire/demo-rc3/_site/_assets/styles/fonts.scss:13:15 Error: Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet at Object.wrapException (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:1250:17) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72193:23 at _wrapJsFunctionForAsync_closure.$protected (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3841:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:28694:12) at Object._asyncStartSync (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3805:20) at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72199:16) at _EvaluateVisitor2.visitVariableExpression$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72173:19) at VariableExpression0.accept$1$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99886:22) at VariableExpression0.accept$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99889:19) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:76384:44 3:14:35 PM [vite] Internal server error: [sass] Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet Plugin: vite:css File: /home/chris/quire/demo-rc3/_site/_assets/styles/fonts.scss:13:15 Error: Undefined variable. ╷ 13 │ @return url($assets-dir + 'fonts/' + $file); │ ^^^^^^^^^^^ ╵ _site/_assets/styles/fonts.scss 13:15 font() _site/_assets/styles/fonts.scss 23:8 @import _site/_assets/styles/application.scss 5:9 root stylesheet at Object.wrapException (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:1250:17) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72193:23 at _wrapJsFunctionForAsync_closure.$protected (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3841:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:28694:12) at Object._asyncStartSync (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:3805:20) at _EvaluateVisitor2.visitVariableExpression$body$_EvaluateVisitor0 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72199:16) at _EvaluateVisitor2.visitVariableExpression$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:72173:19) at VariableExpression0.accept$1$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99886:22) at VariableExpression0.accept$1 (/home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:99889:19) at /home/chris/quire/demo-rc3/node_modules/sass/sass.dart.js:76384:44 ```

[Erin-Cecele]

This is related to Jira ticket DEV-13197

[Erin-Cecele]

While we are working on a long-term solution, there is a workaround in the Quire documentation for PDF/Print output: https://quire.getty.edu/docs-v1/multiformat-output/#pdfprint-output

[geealbers]

@anderspollack has a working solution in PR #750. The team needs to discuss how and merge this in along with the required changes to the starter repos

[Erin-Cecele]

Closed with PR #750. Included in quire-11ty release 1.0.0-rc.11.