Vite Sass circular error

[JohanManders]

Describe the bug

I have been breaking my head over this for about a day.

Background image with relative url and variable inside imported scss file throws Circular error on Windows and stops the process.

On Codesandbox, the logo resolves to null, but does continue to work. Logo image should work however and does not.

Changing main.scss from

@import 'variables';

body {
  color: $dark;
  background-image: url('../assets/img/logo.png');
}

to (removing two lines)

body {
  background-image: url('../assets/img/logo.png');
}

and the background image works perfectly.

If changed to (remove background-image line)

@import 'variables';

body {
  color: $dark;
}

and the colors work.

So individually the variable colors and background image work, but together they don't...

Reverting Sass back to 1.26.5 does fix the issue and I think it has something to do with:

/// If passed, the [originalUrl] represents the URL that was canonicalized
/// into [canonicalUrl]. It's used to resolve a relative canonical URL, which
/// importers may return for legacy reasons.

But with Vite I think it has something to do with rewriting the url tag inside scss files.

Might have something to do with #3729

Reproduction

A Github repo to reproduce error: https://github.com/JohanManders/vite-sass-circular-error

A codesandbox link: https://codesandbox.io/s/eager-waterfall-gmoti

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 6.14 GB / 15.93 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.2 => 1.2.3
    vite: ^2.2.3 => 2.3.7

Used package manager: yarn (but npm has same error)

Logs

$ vite --debug
  vite:config bundled config file loaded in 102ms +0ms
  vite:config using resolved config: {
  vite:config   base: '/',
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   server: {
  vite:config     port: 3000,
  vite:config     fsServe: { root: 'D:/apps/vite-sass-circular-error', strict: false }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'D:/apps/vite-sass-circular-error/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: 'D:/apps/vite-sass-circular-error',
  vite:config   publicDir: 'D:\\apps\\vite-sass-circular-error\\public',
  vite:config   cacheDir: 'D:\\apps\\vite-sass-circular-error\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +6ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.3.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 290ms.

  vite:time 0ms   / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 15ms  /index.html +29ms
  vite:resolve 1ms   /apps/vite-sass-circular-error/node_modules/vite/dist/client/client -> D:/apps/vite-sass-circular-error/node_modules/vite/dist/client/client.js +0ms
  vite:resolve 3ms   /@vite/client -> D:/apps/vite-sass-circular-error/node_modules/vite/dist/client/client.js +1ms
  vite:load 1ms   [fs] /@vite/client +0ms
  vite:resolve 1ms   ./env -> D:/apps/vite-sass-circular-error/node_modules/vite/dist/client/env.js +12ms
  vite:resolve 0ms   /node_modules/vite/dist/client/env.js -> D:/apps/vite-sass-circular-error/node_modules/vite/dist/client/env.js +0ms
  vite:transform 8ms   /@vite/client +0ms
  vite:time 17ms  /@vite/client +35ms
  vite:resolve 0ms   /src/main.js -> D:/apps/vite-sass-circular-error/src/main.js +3ms
  vite:load 1ms   [fs] /src/main.js +13ms
  vite:resolve 0ms   vue -> D:/apps/vite-sass-circular-error/node_modules/.vite/vue.js?v=49b0aae3 +2ms
  vite:resolve 0ms   /node_modules/.vite/vue.js?v=49b0aae3 -> D:/apps/vite-sass-circular-error/node_modules/.vite/vue.js?v=49b0aae3 +0ms
  vite:resolve 0ms   ./App.vue -> D:/apps/vite-sass-circular-error/src/App.vue +0ms
  vite:resolve 0ms   /src/App.vue -> D:/apps/vite-sass-circular-error/src/App.vue +1ms
  vite:resolve 0ms   ./router -> D:/apps/vite-sass-circular-error/src/router/index.js +0ms
  vite:resolve 0ms   /src/router/index.js -> D:/apps/vite-sass-circular-error/src/router/index.js +1ms
  vite:transform 3ms   /src/main.js +6ms
  vite:time 5ms   /src/main.js +6ms
  vite:load 1ms   [fs] /node_modules/vite/dist/client/env.js +26ms
  vite:rewrite 0ms   [no imports] node_modules\vite\dist\client\env.js +0ms
  vite:transform 0ms   /node_modules/vite/dist/client/env.js +24ms
  vite:time 2ms   /node_modules/vite/dist/client/env.js +23ms
  vite:load 1ms   [fs] /src/App.vue +4ms
  vite:resolve 0ms   /src/App.vue?vue&type=style&index=0&lang.scss -> D:/apps/vite-sass-circular-error/src/App.vue?vue&type=style&index=0&lang.scss +39ms
  vite:hmr [self-accepts] src\App.vue +0ms
  vite:transform 13ms  /src/App.vue +16ms
  vite:time 15ms  /src/App.vue +16ms
  vite:load 0ms   [fs] /src/router/index.js +15ms
  vite:resolve 0ms   vue-router -> D:/apps/vite-sass-circular-error/node_modules/.vite/vue-router.js?v=49b0aae3 +4ms
  vite:resolve 0ms   /node_modules/.vite/vue-router.js?v=49b0aae3 -> D:/apps/vite-sass-circular-error/node_modules/.vite/vue-router.js?v=49b0aae3 +0ms
  vite:resolve 0ms   /src/views/Homepage.vue -> D:/apps/vite-sass-circular-error/src/views/Homepage.vue +1ms
  vite:resolve 1ms   @/views/Homepage.vue -> D:/apps/vite-sass-circular-error/src/views/Homepage.vue +0ms
  vite:transform 3ms   /src/router/index.js +5ms
  vite:time 4ms   /src/router/index.js +5ms
  vite:load 0ms   [plugin] /src/App.vue?vue&type=style&index=0&lang.scss +4ms
  vite:resolve 0ms   /src/assets/scss/main -> D:/apps/vite-sass-circular-error/src/assets/scss/main.scss +0ms
  vite:resolve 1ms   @/assets/scss/main -> D:/apps/vite-sass-circular-error/src/assets/scss/main.scss +1ms
  vite:resolve 2ms   variables -> null +7ms
D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:27341
      throw error;
      ^

Invalid argument(s): Uri d:%5Capps%5Cvite-sass-circular-error%5Csrc%5Cassets%5Cscss%5Cmain.scss must have scheme 'file:'.
    at Object.wrapException (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:1234:17)
    at WindowsStyle.pathFromUri$1 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:33151:17)
    at StaticClosure.fromUri (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:16133:37)
    at Object.NullableExtension_andThen0 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:18450:40)
    at Object._wrapException (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:13015:14)
    at _render_closure1.call$2 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:81648:21)
    at _RootZone.runBinary$3$3 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:27468:18)
    at _FutureListener.handleError$1 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:26017:19)
    at _Future__propagateToListeners_handleError.call$0 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:26315:49)
    at Object._Future__propagateToListeners (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:4544:77) {
  dartException: <ref *1> ArgumentError {
    _hasValue: false,
    invalidValue: null,
    name: null,
    message: "Uri d:%5Capps%5Cvite-sass-circular-error%5Csrc%5Cassets%5Cscss%5Cmain.scss must have scheme 'file:'.",
    '$thrownJsError': <ref *2> Invalid argument(s): Uri d:%5Capps%5Cvite-sass-circular-error%5Csrc%5Cassets%5Cscss%5Cmain.scss must have scheme 'file:'.
        at Object.wrapException (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:1234:17)
        at WindowsStyle.pathFromUri$1 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:33151:17)
        at StaticClosure.fromUri (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:16133:37)
        at Object.NullableExtension_andThen0 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:18450:40)
        at Object._wrapException (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:13015:14)
        at _render_closure1.call$2 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:81648:21)
        at _RootZone.runBinary$3$3 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:27468:18)
        at _FutureListener.handleError$1 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:26017:19)
        at _Future__propagateToListeners_handleError.call$0 (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:26315:49)
        at Object._Future__propagateToListeners (D:\apps\vite-sass-circular-error\node_modules\sass\sass.dart.js:4544:77) {
      dartException: [Circular *1],
      '$cachedTrace': _StackTrace {
        _exception: [Circular *2],
        _trace: "Invalid argument(s): Uri d:%5Capps%5Cvite-sass-circular-error%5Csrc%5Cassets%5Cscss%5Cmain.scss must have scheme 'file:'.\n" +
          '    at Object.wrapException (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:1234:17)\n' +
          '    at WindowsStyle.pathFromUri$1 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:33151:17)\n' +
          '    at StaticClosure.fromUri (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:16133:37)\n' +
          '    at Object.NullableExtension_andThen0 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:18450:40)\n' +
          '    at Object._wrapException (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:13015:14)\n' +
          '    at _render_closure1.call$2 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:81648:21)\n' +
          '    at _RootZone.runBinary$3$3 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:27468:18)\n' +
          '    at _FutureListener.handleError$1 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:26017:19)\n' +
          '    at _Future__propagateToListeners_handleError.call$0 (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:26315:49)\n' +
          '    at Object._Future__propagateToListeners (D:\\apps\\vite-sass-circular-error\\node_modules\\sass\\sass.dart.js:4544:77)'
      }
    }
  }
}
error Command failed with exit code 1.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[underfin]

Close at #3729

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.