Nuxt SSR build: Lexical error when importing default theme scss version
dsvgl opened this issue · 5 comments
Describe the bug
I'm using Nuxt in SSR mode. To prevent console warnings about css map not found, I am importing theme style from lib/theme/default.scss instead of theme/default.css. Like mentioned here: #114 (comment)
When doing a build, it fails with the following error (also see screenshot below):
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area: $size * 0.5
PostCss seems to doesn't like the plain sass vars inside a calc function in _triangle.scss (see screen below).
Writing it as border-width: calc(#{$size} * 0.5); fixes the problem.
Additional context
Offending line:
Environment
- OS & Version: macOS
- Vue version: v2.6.14
- Nuxt version: v2.15.8
- Component Version: 3.2.18
calc(#{$size} * 0.5) compiled css will be calc(10px * 0.5).
You can also use interpolation in a calculation. However, if you do, nothing in the parentheses that surround that interpolation will be simplified or type-checked, so it’s easy to end up with extra verbose or even invalid CSS. Rather than writing calc(10px + #{$var}), just write calc(10px + $var)!
This error can be bypassed by referring directly to the css file.
@NightCatSama thx for the quick reply. Really appreciate it!
When using the css file, I get warning in console about missing css source map (in dev mode). Like mentioned here: #114 (comment)
DevTools failed to load source map: Could not load content for http://localhost:3000/default.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
There is a reference-comment to a source map file at the bottom of the css file.
My workaround: I copied said css file into my src dir, removed the comment and use this now.
If you know a better way, I'm all ears :)
BTW: great slider, really enjoying it!
I can't think of a better solution.
Maybe can copy default.scss and triangle.scss for local use, that is also a recommended way to customize the theme. 😃
Okay, then I'll add more comments to our project so teammates know why this was done. 😄