copy loader does not replace import statements

[gyfchong]

Trying to use the copy loader to copy my scss files to the outDir however the result isn't what I expected.

esbuild.config.js

esbuild
  .build({
    entryPoints: ["./src/index.ts"],
    outdir: "./dist",
    bundle: true,
    loader: { ".module.scss": "copy" },
  })

Component

import React from "react"
import styles from "./ExampleComponent.module.scss"

export const ExampleComponent = (): JSX.Element => (
  <div className={styles.exampleComponent}>
    ExampleComponent FUTURE
  </div>
)

The output scss file is copied here: ./dist/ExampleComponent.module-5ETYEIC6.scss
The resulting compiled component ./dist/components/ExampleComponent.js

var ExampleComponent_module_scss_1 = __importDefault(require("./ExampleComponent.module.scss"));

Expected

At the very least, I understood that the resulting compiled component ./dist/components/ExampleComponent.js should have the import replaced:

var ExampleComponent_module_scss_1 = __importDefault(require("../ExampleComponent.module-5ETYEIC6.scss"));

And what I think would be better is the output scss file is copied to the same directory as the component itself:./dist/components/ExampleComponent.module-5ETYEIC6.scss

[evanw]

I can't reproduce this. The import path does seem to be replaced when I do this. Please provide a self-contained way to reproduce the issue.

[gyfchong]

Ah apologies, I was using tsc to compile the typescript files and esbuild separately to copy the scss files and I think tsc overrides the files which esbuild outputs.

This works if esbuild is the only bundler