Error: Can't find stylesheet to import.

svenvandescheur commented 2 years ago

Describe the bug

Seems to be unresolved in latest release (2.6.14): https://github.com/vitejs/vite/issues/2499.

This issue has been reported before, and since the original issue is closed I assume it has a patch. However I encounter the same behaviour when attempting to load a css file from Leaflet.

Reproduction

@use "~leaflet/dist/leaflet.css";

Error: Failed to find '~leaflet/dist/leaflet.css'

@use "~leaflet/dist/leaflet.css";

Error: Can't find stylesheet to import. â•· 1 â”‚ @use "~leaflet/dist/leaflet.css";

System Info

System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 1.17 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.7.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: 95.0.1020.53
    Firefox: 93.0
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.0.4 
    @vitejs/plugin-react-refresh: ^1.3.1 => 1.3.6 
    vite: ^2.6.14 => 2.6.14

Used Package Manager

npm

Logs

vite:time 18.31ms /src/Components/Map/Map.tsx +21ms
  vite:transform [reuse pending] for /src/Components/Map/Map.scss +18ms
4:59:34 PM [vite] Internal server error: Failed to find '~leaflet/dist/leaflet.css'
  in [
    /Users/svenvandescheur/PycharmProjects/open-inwoner/frontend/src/Components/Map
  ]
  Plugin: vite:css
  File: /Users/svenvandescheur/PycharmProjects/open-inwoner/frontend/src/Components/Map/Map.scss
      at /Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/vite/dist/node/chunks/dep-e39b05d6.js:74:13
      at async Promise.all (index 0)
      at async LazyResult.runAsync (/Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/postcss/lib/lazy-result.js:394:11)
      at async compileCSS (/Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:20286:27)
      at async TransformContext.transform (/Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:19876:50)
      at async Object.transform (/Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42396:30)
      at async doTransform (/Users/svenvandescheur/PycharmProjects/open-inwoner/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:56801:29)
  vite:time 25.84ms /src/Components/Map/Map.scss +32ms
  vite:time 12.75ms /src/assets/favicon.svg +143ms

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

vikingair commented 2 years ago

For me this helped, since vite module resolution tries to be consistent within stylesheet imports and JS imports and doesn' understand the very common usage of "~" in sass or scss. Add this to your defineConfig:

resolve: {
    alias: [
        {
            // this is required for the SCSS modules
            find: /^~(.*)$/,
            replacement: '$1',
        },
    ],
},

But be aware that this may collide with other aliases you want to support in your JS files.

sapphi-red commented 2 years ago

~ is not a feature of sass. It is implemented in sass-loader and others. https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules https://github.com/heyymarco/tilde-sass

vitejs / vite