1

demo.vue:

<template>
  ...
</template>
<script type="text/ecmascript-6">
  ...
</script>
<style lang="scss" rel="stylesheet/scss">
    @import "~scss/variables.scss";
    .pop-up-box {
      ...
    }
</style>

Everything is fine: coding, compiling, working.

Just WebStorm will display error at

@import "~scss/variables.scss";

Because of WebStorm want to check the path of ~scss/variables.scss but this path is a webpack alias. It will show Cannot resolve directory '~scss'.

Is there any way to let WebStorm know here is a webpack alias or just not show error any more?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
脸很小
  • 23
  • 3
  • AFAIK -- not at the moment. Have a look at this answer from JetBrains team member: http://stackoverflow.com/a/42116001/783119 – LazyOne Feb 10 '17 at 19:52

1 Answers1

0

No way currently, please follow WEB-25321 for updates. WebStorm provides no support for Webpack-specific modules resolving (resolve.moduleDirectories, resolve.root, resolve.alias, etc.). Note that basic support is provided for stylesheet languages (LESS, SCSS), so that webpack-specific imports like "@import '~webpackPackage/test.css'" don't cause errors if ~ is equal to node_modules directory. See https://youtrack.jetbrains.com/issue/WEB-23707#comment=27-1657238

lena
  • 90,154
  • 11
  • 145
  • 150
  • That issue is marked as "fixed", but it still doesn't work, even with new projects created via `vue-cli@3`. – rudolfbyker Aug 27 '19 at 11:35
  • 1
    please make sure to specify a path to `node_modules\@vue\cli-service\webpack.config.js` in **Settings | Languages & Frameworks | JavaScript | Webpack** – lena Aug 27 '19 at 13:21
  • Did that. Still not working with `IntelliJ IDEA 2019.2.1 (Ultimate Edition)` `Build #IU-192.6262.58` on `LinuxMint`. – rudolfbyker Aug 27 '19 at 13:29
  • what does your import look like? `@import "~@/styles/variables"` where `styles` is `/src/styles` works fine for me – lena Aug 27 '19 at 13:43
  • The import looks like `@import '@/scss/variables';` and lives inside the ` – rudolfbyker Aug 27 '19 at 13:46
  • 1
    try prepending `@` with `~` - see https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules, https://stackoverflow.com/questions/34717203/webpack-with-sass-loader-scss-file-import-does-not-recognize-resolve-alias – lena Aug 27 '19 at 13:51
  • The problem is not with webpack. It builds. The problem is with IDEA not finding the imports. Just like in the OP's question. Also, the problem is only inside – rudolfbyker Aug 29 '19 at 12:25
  • I have them same issue in sass files using @import. Intellij IDEA 2019.2.4 – Stefan Norberg Nov 24 '19 at 23:01