CSS processors aren't considered installed if root is placed outside of vite.config's folder

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• 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

<root> describes the path of index.html, essentially where the static file server is running but it’s also used as the root when searching for npm packages, which I’d rather think would be where vite.config is actually placed (or at least it should be used as a fallback).

I looked for potential duplicates and we started off a discussion on discord but it makes sense to raise this as a bug report to either clarify if you’d like this functionality to work at all (or identify potential blockers for this) or mention the limitation and reason in the docs.

Reproduction

Lets say you have the following folder structure:

A
  /package.json (npm i -D vite sass)
  /vite.config.js (export default {root: "../B/"})
B
  /index.html (uses /styles.scss)
  /styles.scss (causes error: Internal server error: Preprocessor dependency "sass" not found. Did you install it?)

So the idea here is that you run npm/yarn in folder A but the root of index.html (and its relative resources) is inside folder B (or C,D,E…, depending on the vite.config <root>). Folder A defines the dev-server and the other folder defines what’s being served.

Everything seems to run smoothly but the compileCSS function seems to send config.root to loadPreprocessor which fails, since the css-plugin (e.g. sass) isn’t installed in the <root> so an error is thrown: Preprocessor dependency "${lang}" not found. Did you install it?.

Wouldn’t it make sense if the process would also fallback to the node_modules where vite process is running, if the <root> is different?

A possible fix would be for loadPreprocessors to accept roots: string[] instead of root: string which would be used by require.resolve (or just add the fallback locally within the loader so you can keep the arg as a single root).

System Info

• vite version: master (2.1.2)
• Operating System: Win10
• Node version: 12/14
• Package manager (npm/yarn/pnpm) and version: npm 6/7

Logs

19:16:33 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
  Plugin: vite:css
  File: C:/repro/B/styles.scss?direct
      at loadPreprocessor (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:19061:15)
      at scss (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:19067:20)
      at compileCSS (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:18838:40)
      at async TransformContext.transform (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:18523:50)
      at async Object.transform (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:43642:30)
      at async transformRequest (C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:59301:29)
      at async C:\repro\A\node_modules\vite\dist\node\chunks\dep-6f1d3d8c.js:59409:32

[HomyeeKing]

yes, they are handled differently, you can look through the vite docs to see how the other assets are processed

[patak-dev]

Closed by https://github.com/vitejs/vite/pull/3988, please report back if you find issues @bjarkihall. Thanks @ferdinando-ferreira for the heads up 👍🏼