Syntax Error: SassError in Quasar devServer with Yarn workspace

[anhzf]

Describe the bug
So I've created a new yarn workspace as a step in reproduce but what I've got is COMPILATION ERROR

To Reproduce
Steps to reproduce the behavior:

1. yarn init
2. git init
3. git submodule add -n web [quasarProjectRepositoryUrl] packages/web

this is a new quasar project with windicss configured via webpack, you can check out here https://github.com/iamlazy-dev/app-web

4. add workspaces fields in package.json in root project with ["packages/*"] and set private fields to true
5. yarn install
6. add script yarn workspace [packageName] named "web"
7. execute yarn web quasar dev to start the devServer

Expected behavior
COMPILATION ERROR is gone

Screenshots

Platform (please complete the following information):
Quasar Version: 2
@quasar/app Version: 3.0.0

Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS:
Node: 14.17.0
NPM: 6.14.13
Yarn: 1.22.10
Browsers: -
iOS: -
Android: -
Electron: -

Additional context
monorepo with yarn workspaces, yarn without workspace its fine as well as npm

[hawkeye64]

Have you done any research on this or just want members of the team to do that for you? If you need faster service, the you should investigate a bit and let us know what you have found.

While I don't specifically think this is a Quasar issue, searching for sass, sass-loader, webpack, yarn workspace, etc and some sort of correlation would have helped A LOT.

I found these:
webpack-contrib/sass-loader#820
webpack-contrib/sass-loader#804 (comment)
https://gitmemory.com/issue/yarnpkg/yarn/4867/520995582

The best I could figure is when in a yarn workspace (which I use all the time without issue) that uses a git sub-module, you have to yarn install --force in order to build the sass node bindings properly for it to work.

[anhzf]

Have you done any research on this or just want members of the team to do that for you? If you need faster service, the you should investigate a bit and let us know what you have found.

In advance, I apologize and thank you so much to the quasar community especially to @hawkeye64.
I'll try my best after this 😅, it's sound new to me
I just try yarn install --force but nothing different

[hawkeye64]

@anhzf
This is what I am seeing in dist/quasar.sass

.q-loading-bar
  position: fixed
  z-index: $z-max
  transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s
  background: $red
  &--top
    left: 0 #{"/* rtl:ignore */"}
    right: 0 #{"/* rtl:ignore */"}
    top: 0
    width: 100%
  &--bottom
    left: 0 #{"/* rtl:ignore */"}
    right: 0 #{"/* rtl:ignore */"}
    bottom: 0
    width: 100%
  &--right
    top: 0
    bottom: 0
    right: 0
    height: 100%
  &--left
    top: 0
    bottom: 0
    left: 0
    height: 100%

This left: 0 #{"/* rtl:ignore */"} is a special syntax that allows this line to be ignored when also compiled for RTL.
However, in your quasar.sass, it appears as if you have a space separating the # and {.
Can you confirm this or is that just how the output was created?

[anhzf]

@anhzf
This is what I am seeing in dist/quasar.sass

.q-loading-bar
  position: fixed
  z-index: $z-max
  transition: transform .5s cubic-bezier(0,0,.2,1), opacity .5s
  background: $red
  &--top
    left: 0 #{"/* rtl:ignore */"}
    right: 0 #{"/* rtl:ignore */"}
    top: 0
    width: 100%
  &--bottom
    left: 0 #{"/* rtl:ignore */"}
    right: 0 #{"/* rtl:ignore */"}
    bottom: 0
    width: 100%
  &--right
    top: 0
    bottom: 0
    right: 0
    height: 100%
  &--left
    top: 0
    bottom: 0
    left: 0
    height: 100%

This left: 0 #{"/* rtl:ignore */"} is a special syntax that allows this line to be ignored when also compiled for RTL.
However, in your quasar.sass, it appears as if you have a space separating the # and {.
Can you confirm this or is that just how the output was created?

because of this, I think it's internal from quasar so I posted it here. as you can see too in my screenshot above the output provide me to the wrong line (694:14) when I check it, it's totally different line so I can't figure out what happens

below is the screenshot of when I open that line

one more, why it's not working in yarn workspaces

[hawkeye64]

one more, why it's not working in yarn workspaces

This I don't know. I have about a dozen projects on the go that use yarn workspaces and don't have this issue.

Does it work if you remove the yarn workspace info, delete all your node_modules folders and delete yarn.lock, and treat them as individual projects?

Let's see if we can narrow this down.

[anhzf]

Does it work if you remove the yarn workspace info, delete all your node_modules folders and delete yarn.lock, and treat them as individual projects?

of course, I've repeated that reproduce step above three times

[hawkeye64]

@anhzf The only other thing I can see that I do differently is this: yarn web quasar dev
I do this

cd web
quasar dev

[anhzf]

@anhzf The only other thing I can see that I do differently is this: yarn web quasar dev

yeah, this is because the yarn itself recommended to run everything via yarn,

cd web
quasar dev

I've to do this before, and it's not work

[anhzf]

I've tried some experiments, I do exactly the same as in reproducing step but with a new quasar project repository and it's fine without any error.

the difference is, my old project is using WindiCSS webpack plugin as you can see in my quasar.config.js

sorry, I'm new in the community, should I migrate this issue to WindiCSS instead? 😅

[hawkeye64]

@anhzf If you can't get it to replicate on a new Quasar project, but it does happen when you add windicss, then yes.

A bit more info/ammo...

It appears behind the scenes that windicss is also processing the sass/scss, but they are not using an RTL preprocessor (quasar uses postcss-rtlcss) and therefore, by the time it's passed to sass, the comments have not been stripped off and sass chokes.

[anhzf]

thank you @hawkeye64 for following these issues, there's a postcss plugin to use WindiCSS and no error at least at I posted this comment

[soulsam480]

Had the same issue, fixed by adding the windicss postcss plugin instead.