Unable to Build Frontend from Source (Can't find stylesheet to import)

Support
1

Hi, I’m trying to run Vikunja in subdirectory, I tried following guide and this guide to rebuild frontend from source but no luck so far…

I followed the guide step by step (install pnpm → git clone → ran pnpm install → changed .env.local → ran pnpm run build)

When I run pnpm run build either on Linux or Windows, I get this (or similar to this) error.

PS C:\dev\git\frontend> pnpm run build

> vikunja-frontend@0.10.0 build C:\dev\git\frontend
> vite build && workbox copyLibraries dist/

Building "legacy" build with "@vitejs/plugin-legacy"
plugin-legacy overrode 'build.target'. You should pass 'targets' as an option to this plugin with the list of legacy browsers to support instead.
vite v4.3.4 building for production...
✓ 126 modules transformed.
[vite-plugin-pwa:build] [sass] Can't find stylesheet to import.
  ╷
2 │ @import "C:\dev\git\frontend\src/styles/common-imports";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\App.vue 2:9  root stylesheet
file: C:/dev/git/frontend/src/App.vue?vue&type=style&index=0&lang.scss
Error: Can't find stylesheet to import.
  ╷
2 │ @import "C:\dev\git\frontend\src/styles/common-imports";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\App.vue 2:9  root stylesheet
error during build:
Error: Can't find stylesheet to import.
  ╷
2 │ @import "C:\dev\git\frontend\src/styles/common-imports";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\App.vue 2:9  root stylesheet
    at Object.wrapException (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:1237:17)
    at C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:72198:25
    at _wrapJsFunctionForAsync_closure.$protected (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:3828:15)
    at _wrapJsFunctionForAsync_closure.call$2 (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:28886:12)
    at _awaitOnObject_closure.call$1 (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:28874:32)
    at Object._rootRunUnary (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:4203:18)
    at StaticClosure.<anonymous> (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:101628:16)
    at _CustomZone.runUnary$2$2 (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:30283:39)
    at _Future__propagateToListeners_handleValueCallback.call$0 (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:29355:51)
    at Object._Future__propagateToListeners (C:\dev\git\frontend\node_modules\.pnpm\sass@1.62.1\node_modules\sass\sass.dart.js:3999:93)
 ELIFECYCLE  Command failed with exit code 1.

I also tried building from older versions and the error is still there, so I guess I’m doing something wrong.
I found few github issues related directly to vite but I can’t figure it out on my own…
Thanks in advance!

2

I had the same problem on Windows and worked around it by editing vite.config.ts locally:

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,7 +19,7 @@ const pathSrc = fileURLToPath(new URL('./src', import.meta.url))

 // the @use rules have to be the first in the compiled stylesheets
 const PREFIXED_SCSS_STYLES = `@use "sass:math";
-@import "${pathSrc}/styles/common-imports";`
+@import "src/styles/common-imports";`

Definitely not the optimal solution but enough to move on.

3

Do you want to send a pr with a fix?

4

I am not sure if I know what I am doing there. It’s just running on my machine. Obviously other users (especially the build pipeline) don’t have a problem and the workaround could break their setup.