relative paths in SCSS cause ModuleNotFoundError

[diachedelic]

Version

4.4.6

Reproduction link

https://github.com/diachedelic/vue-cli-scss-repro

Environment info

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

git clone [email protected]:diachedelic/vue-cli-scss-repro.git &&
  cd vue-cli-scss-repro &&
  ./build.sh

Also see this diff with the scaffolded app.

What is expected?

vue-cli-service build should succeed

What is actually happening?

 ERROR  Failed to compile with 1 errors                                                   2:08:52 PM

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './assets/image.svg' in '/private/tmp/vue-cli-scss-repro/vue-app/src'

---

Relative paths to assets in SASS should be resolved relative to the SCSS file, regardless of whether it is in the same module as the Vue CLI app. You can see in vanilla-app, which does not use the vue-cli, that the asset is resolved.

[diachedelic]

I am trying to fix this but I do not know where to look. Does this seem like a bug in vue-loader? It seems like a problem in the way single file components import their SCSS and pass it on to webpack.

[diachedelic]

Prepending the path with a ~ does not solve the issue.

Related:

• Error with image paths (SASS files) vuejs-templates/webpack#563 (comment)
• background-image in style property, what is the best practice? vue-loader#646 (comment)

[fangbinwei]

Sorry for the late reply. Your two projects are not equivalent, since you use @import in vue-app, but use import in vanilla-app.

If you do like below, they are equivalent. Then the build of vanilla-app will be failed like vue-app.

vanilla-app

main.js

import './index.scss';

index.scss

@import '~lib/index.scss';

It's the problem of @import, see here

[diachedelic]

Ah ha! Straight from the horse's mouth, this is the correct way to import external styles into a Vue component:

<style lang="scss" src="lib/index.scss"></style>