Loading SCSS with the `?url` flag causes the import to fail

• Read the docs.
• 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.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

Similar to #2455, when importing SCSS into a JS file, with the ?url flag, the import will fail.

A related, but apparently different bug, is that if ?url is used with a CSS file, it evaluates to a string like export default "/src/style.css". This may deserve a separate issue.

Reproduction

This can be reproduced with:

1. yarn create @vitejs/app --template vue vite-sample; cd
2. yarn add sass
3. Create src/style.scss
4. Add an import to App.vue

   import data from "./style.scss?url"
   console.log(data) 
   

Error in console

[plugin:vite:css] expected "{".
  ╷
1 │ export default "/src/style.scss"
  │                                 ^
  ╵
  src/style.scss 1:33  root stylesheet
/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/src/style.scss:1:33
    at Object._newRenderError (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:13537:19)
    at Object._wrapException (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:13374:16)
    at _render_closure1.call$2 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:80373:21)
    at _RootZone.runBinary$3$3 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:27269:18)
    at _FutureListener.handleError$1 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:25797:19)
    at _Future__propagateToListeners_handleError.call$0 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:26094:49)
    at Object._Future__propagateToListeners (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:4543:77)
    at _Future._completeError$2 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:25927:9)
    at _AsyncAwaitCompleter.completeError$2 (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:25270:12)
    at Object._asyncRethrow (/home/jonathan/src/git.ec2software.com/jonathan/vite-sample/node_modules/sass/sass.dart.js:4292:17
Click outside or fix the code to dismiss.
You can also disable this overlay with hmr: { overlay: false } in vite.config.js.

System Info

• vite version: 2.1.0
• Operating System: Arch Linux
• Node version: v15.10.0
• Package manager (npm/yarn/pnpm) and version: yarn

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[sapphi-red]

Currently queries has these behaviors.

• import cssContent from 'foo.css': bundles files into a single css file and obtains the content of it (also loads style)
• import cssContent from 'foo.css?inline': bundles files into a single css file and obtains the content of it
• import rawCssContent from 'foo.css?raw': raw css file (no bundle or transpile)
• import worker from 'foo.js?worker': bundles files into a single worker file
• import workerUrl from 'foo.js?worker&url': bundles multiple files into a single worker file and obtains the url of it (#7914)

I think making it like below will have a consistency with the queries above.

• import cssUrl from 'foo.css?url': bundles files into a single css file and obtains the url of it
• import rawCssUrl from 'foo.css?raw&url': obtains the url of raw css file (no bundle or transpile)

Also these (it’s a bit off-topic)

• import jsUrl from 'foo.js?url': bundles files into a single js file and obtains the url of it (#6757)
• import jsUrl from 'foo.js?raw&url': obtains the url of raw js file (no bundle or transpile)

[duckbrain]

My expectation would be to point the the resulting CSS after compilation, so I can have a link tag that I inject at runtime reference it, so in development it would be /src/style.scss (which the vite dev server compiles on request) and in production it would be dist/assets/style.b4186631.css or whatever is output.

If I understand, the problem of what to do is that the styles are concatenated, scoped to the JS, but I’m trying to reference a style directly, so it may be part of one or more bundles that’s associated with various scripts, not a single CSS bundle for that SCSS entrypiont.

The usecase I’m trying to solve is scoping my CSS inside of a shadow DOM element. Another domain is including a script from my site to get a component. I want to omit adding the CSS until I manually add it to the shadow node.