resolver-glob not working with .scss files

[ImKubass]

🐛 bug report

resolver-glob not working with SCSS files

🎛 Configuration (.babelrc, package.json, cli command)

{
  "source": "./index.ts",
  "scripts": {
    "dev": "parcel watch --no-hmr",
    "build": "parcel build"
  },
  "dependencies": {
    "parcel": "^2.8.3"
  },
  "devDependencies": {
    "@parcel/resolver-glob": "^2.8.3",
    "@parcel/transformer-sass": "^2.8.3"
  }
}

🤔 Expected Behavior

able to compile globs in .scss files. For example:

@import "../components/**/*";

😯 Current Behavior

@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
4 │ @import "../components/**/*";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  styles.scss 4:9  root stylesheet

  Error: Can't find stylesheet to import.
    ╷
  4 │ @import "../components/**/*";
    │         ^^^^^^^^^^^^^^^^^^^^
    ╵
    styles.scss 4:9  root stylesheet
      at Object.wrapException (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:1237:17)
      at /Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:72085:25
      at _wrapJsFunctionForAsync_closure.$protected (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:3828:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:28880:12)
      at _awaitOnObject_closure.call$1 (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:28868:32)
      at Object._rootRunUnary (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:4203:18)
      at StaticClosure.<anonymous> (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:101408:16)
      at _CustomZone.runUnary$2$2 (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:30277:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:29349:51)
      at Object._Future__propagateToListeners (/Users/jakubjetleb/Webs/parcel-scss-glob/node_modules/sass/sass.dart.js:3999:93)

🔦 Context

Importing .scss files one by one works just fine. But its very annoying to import new file every time I create new .scss file.

💻 Code Sample

https://github.com/ImKubass/parcel-scss-glob

Install:

npm i

build:

npm run build

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	v17.4.0
npm/Yarn	npm 8.3.1
Operating System	MacOS

[cwahlfeldt]

Im running into this issue as well. @ImKubass did you ever find a work around?

@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
7 │ @import '../../views/patterns/00-base/**/**/*.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  resources/assets/styles/ool-styles.scss 7:9  root stylesheet

  Error: Can't find stylesheet to import.
    ╷
  7 │ @import '../../views/patterns/00-base/**/**/*.scss';

[ImKubass]

Im running into this issue as well. @ImKubass did you ever find a work around?

@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
7 │ @import '../../views/patterns/00-base/**/**/*.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  resources/assets/styles/ool-styles.scss 7:9  root stylesheet

  Error: Can't find stylesheet to import.
    ╷
  7 │ @import '../../views/patterns/00-base/**/**/*.scss';

Kinda, but its really hacky, I dont know how to extend parcel functionality, so i have to run script that will deal with globs. Here si code snippet:

import fg from "fast-glob"

const sassFile = Bun.file(sourcePath)

const sassFileContent = await sassFile.text()
let sassContentGlobbed = sassFileContent

const IMPORT_REG = /^([ \t]*(?:\/\*.*)?)@import\s+["']([^"']+\*[^"']*(?:\.scss|\.sass)?)["'];?([ \t]*(?:\/[/*].*)?)$/gm
const matches = sassFileContent.match(IMPORT_REG) ?? []

for (const match of matches) {
  const glob = `${match.split('"')[1]}.scss`
  const files = (await fg(glob)).map((file) => {
    return `@import "${file}";`
  })
  sassContentGlobbed = sassContentGlobbed.replace(match, files.join("\n"))
}

Also I have imports like this (without back slashes)

@import "src/scss/overrides/*";
@import "src/scss/elements/*";
@import "src/scss/generic/*";
@import "src/scss/utilities/*";
@import "src/components/**/*";

[cwahlfeldt]

@ImKubass Right on thank you!

[rmbaici]

This is still an issue. Anything to be done about this aside from a workaround?