"canonicalize() method must return a URL" when using SCSS [BUG]

[filloax]

Describe the bug
Using the custom SCSS option returns this error with no specific customization, using Astro 5.

To Reproduce
Using Astro 5 with this package, tried using the SCSS as previously by doing

@use "astro-breadcrumbs/breadcrumbs.scss";

in my SCSS file, but it doesn't seem to work, printing this error:

14:25:37 [ERROR] [sass] The canonicalize() method must return a URL.
  ╷
1 │ @use "astro-breadcrumbs/breadcrumbs.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\styles\astro-breadcrumbs-config.scss 1:1  root stylesheet

Reference repository: filloax.github.io (link is at a commit where this happens once the @use breadcrumbs is uncommented in the file mentioned in the error above)

Expected behavior
This compiling the SCSS successfully.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• astro version: 5.1.1
• astro-breadcrumbs version: 3.3.1

astro-breadcrumbs usage:

<Breadcrumbs
    ariaLabel="List of section pages"
    linkTextFormat="capitalized"
    customizeLinks={bcLinks}
  >
    <svg
      slot="separator"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg
    >
  </Breadcrumbs>

astro config:

export default defineConfig({
  site: 'https://filloax.github.io',
  base: '/',
  integrations: [mdx(), analogjsangular({
    vite: {
      inlineStylesExtension: 'scss|sass|less',
    },
  }), svelte()],
  vite: {
    ssr: {
      // transform these packages during SSR. Globs supported
      noExternal: ['@rx-angular/**'],
    },
    css: {
      preprocessorOptions: {
        scss: {
          quietDeps: true,
          silenceDeprecations: ['legacy-js-api', 'import'],
        }
      },
    }
  },
  markdown: {
    shikiConfig: {
      theme: 'nord'
    },
    remarkPlugins: [
      remarkGfm, 
      remarkSmartypants, 
      [remarkToc, {
        heading: 'contents',
      }],
      remarkRawFrontmatter,
    ],
    rehypePlugins: [[rehypeExternalLinks, {
      target: '_blank'
    }]]
  }
});

Desktop (please complete the following information):

• OS: Windows 11
• Browser: irrelevant, does not compile

[felix-berlin]

Hi @filloax,
I have just had a look at your project locally (Win 11 on WSL 2 -> Ubuntu LTS). Apart from the Vite and Angular error, I was able to compile normally. I could not detect any SASS errors.

When or how exactly did the error occur for you?

Output:

[filloax]

Additional context I discovered after some more testing, it seems to only happen when opening a page that actually imports the breadcrumbs config SCSS (I initially assumed all the scss files were precompiled, it seems not in astro dev). Also, to be clear, I worked around this in the later commits by copying the scss from astro-breadcrumbs with a pre-build script, so only the commits up to the one I linked should have that issue.