How do I run demo-app?

[ggdouglas]

Environment

• Package version(s): latest
• Browser and OS versions: macOS Sonoma 14.5

Question

Hi there! 👋 I am new to Blueprint and wanted to run the demo app to develop on some components in a playground/isolated environment. I see the @blueprintjs/demo-app package as well as a reference to it in the README. However, I don't see any documentation on how the demo app should be run. Am I missing something?

I tried the following command:

npx nx run @blueprintjs/demo-app:dev

but ran into a scss compilation error in the _examples.scss stylesheet used in the demo app.

ERROR in ./src/index.scss (../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/index.scss)
Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import "@blueprintjs/core/lib/scss/variables";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/_examples.scss 1:9  @import
  src/index.scss 6:9             root stylesheet
 @ ./src/index.scss 8:6-285 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-255 77:0-255 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./src/index.tsx 154:20-42
webpack compiled with 1 error

The same error occurs when running the dev command locally from within the package directory:

cd packages/demo-app && yarn dev

Is this a bug, or am I invoking the wrong set of commands to run the demo? Changing the import to pull from core/src/common instead of core/lib/scss seems to fix the compilation issue:

--- a/packages/demo-app/src/styles/_examples.scss
+++ b/packages/demo-app/src/styles/_examples.scss
@@ -1,4 +1,5 @@
-@import "@blueprintjs/core/lib/scss/variables";
+@import "@blueprintjs/colors/lib/scss/colors";
+@import "@blueprintjs/core/src/common/variables";
 
 $background-color: $light-gray2;
 $content-background-color: $light-gray4;

Possibly related to #5331