Problems Rendering Stylesheets with quire preview on Quire 1.0.0-rc.3

[chrisdaaz]

I just installed 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

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

[belmendo]

My workaround for screen was to add a line at top of fonts.scss to set the variable.

$assets-dir: '_assets/';

Not familiar enough with sass to understand why the media query isn't setting the directory.

[geealbers]

Yes, there was an erroneous bit of code pushed to content/_assets/styles/fonts.scss last week that was meant to handle the different font paths needed for the online site and the PDF output:

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

Replacing this with $assets-dir: '_assets/'; as @belmendo suggested (Thanks!), will work to fix those paths for the online site. If you need to output the PDF, switching it temporarily to $assets-dir: '/_assets/'; should do it. Our team will look at this today and we'll push a more permanent fix soon.

[geealbers]

Actually, I think it's $assets-dir: '_assets/'; for PDF; and $assets-dir: '/_assets/'; for online outputs. Sorry about that. Either way, we'll get it fixed as soon as we can.

[chrisdaaz]

Thank you!

[geealbers]

FYI, for now we've reverted the offending commits, so any new projects you start at this point (without needing to update Quire) shouldn't have this problem.

There is still an underlying problem of the asset paths for fonts not working in the PDF, but our engineers are working on that and will push a permanent fix when they can. Thanks all!