ModuleNotFoundError when using sass @import in combination with css modules

[dattn]

Version

3.0.0-rc.11 - 3.0.5

Reproduction link

https://github.com/dattn/vue-cli-bug-demo

Node and OS info

Node v10.9.0 / Ubuntu 18.04

Steps to reproduce

npm install
npm run build

What is expected?

The scss files should be imported with Sass.
The code should build successfully.

What is actually happening?

The relative scss files cannot be found.
The build fails with the following error message:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './variables'

---

With vue-cli v3.0.0-rc.10, the code builds as expected.
The problem exists as of version 3.0.0-rc.11. The latest version 3.0.5 also fails.

I think the source of the problem is the following commit:
4220835

When I add the following props to the vue.config.js, the build works again:

module.exports = {
  css: {
    loaderOptions: {
      css: { importLoaders: 3 }
    }
  }
}

Related issue: #2055

[dattn]

The problem still exists in version v3.0.3.
I have updated the post accordingly.

[dattn]

The problem still exists in version v3.0.5.
I have updated the post accordingly.

[LinusBorg]

So I'm looking at this again and am unsure what to do with it, really.

It seems that we need importLoaders: 2 to support import of css into scss (see #2055), yet for the issue discussed here, we would need importLoaders: 3

So the only real solutions seems to be to let the user decide what he needs? How to call such an option?

Personally I would even have trouble properly explaining what that option does so ... weird problem...