Skip to content

Specifying custom SCSS importer overrides default importer #859

@Laupetin

Description

@Laupetin

Reproduction link or steps

https://stackblitz.com/edit/github-atvcybhy?file=src%2FrandomFolder%2Ftest1.scss&view=editor

What is expected?

When I specify a custom importer for sass via preprocessorOptions/scss, I expect both my custom importer to be active and the default importer to be active as well to resolve things like dependencies from node_modules.

The custom importer is specified in tsdown.config.ts, the imports demonstrating the problem are in src/randomFolder/test1.scss

What is actually happening?

I can only have either my custom importer or the default importer from tsdown code.
Enabling my custom importer overrides the default importer and gets rid of for example being able to resolve from node_modules.

The code suggests that keeping the default importer would be intended behaviour, as it is handled separately:

importers: [internalImporter, ...(sassOptions.importers ?? [])],
...sassOptions,

Any additional comments?

My example tries to both import using a custom importer and from a dependency from node_modules (since this is handled by the default importer).
I chose bootstrap for my example to illustrate the problem, as this is a rather popular dependency that ships scss but any other dependency would have resulted in the same problem.

I assume the problem lies in first special handling the importers array and then in the end overriding the entire object with all properties that were user specified, reverting the special handling for the importers array.

const result = await sass.compileStringAsync(data, {
url: pathToFileURL(filename),
sourceMap: false,
syntax: lang === 'sass' ? 'indented' : 'scss',
importers: [internalImporter, ...(sassOptions.importers ?? [])],
...sassOptions,
})

It should be possible to fix this by applying the user specified options first.
I don't know whether any user specified values for url, sourceMap, syntax should be overridden though.

  const result = await sass.compileStringAsync(data, {
    ...sassOptions,
    url: pathToFileURL(filename),
    sourceMap: false,
    syntax: lang === 'sass' ? 'indented' : 'scss',
    importers: [internalImporter, ...(sassOptions.importers ?? [])],
  })

Metadata

Metadata

Assignees

No one assigned

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions