title: Resolving @import .css in SCSS from node modules in Nuxt.js vs PhpStorm
body: <p>Lets say I'd like to import some stylesheets from a node module in my main <code>app.scss</code>:</p>
  <p><code>@import '~bootstrap/scss/bootstrap';</code></p>
  <p>This will be correctly resolved by PhpStorm, and built by Nuxt.js as well, all good.</p>
  <p>Now if I want to do the same for <a href="https://docs.npmjs.com/about-scopes" rel="nofollow noreferrer">a scoped node module</a> (a node module with a name in the format of <code>@scope/module</code>) Nuxt.js and PhpStorm diverges:</p>
  <ul>
  <li><p><code>@import '@fortawesome/fontawesome-svg-core/styles.css';</code></p>
  <p>This works fine in Nuxt.js, build goes on without issues, but PhpStorm underlines the whole thing saying <code>Cannot resolve directory '@fortawesome'</code></p>
  </li>
  <li><p><code>@import '~@fortawesome/fontawesome-svg-core/styles.css';</code></p>
  <p>This is understood by PhpStorm and can be resolved just fine, however causes Nuxt.js build to fail with:</p>
  </li>
  </ul>
  <pre><code>ERROR in ./client/assets/sass/app.scss
  Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
  ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
  Error: Can't resolve '~@fortawesome/fontawesome-svg-core/styles.css'
  </code></pre>
  <p>So my question is: Which syntax would be considered correct, and is it possible to make both PhpStorm and Nuxt.js happy at the same time?</p>
  <p>For me the <code>~@</code> seems to make more sense, as <code>~</code> resolves to the path of my <code>node_modules</code> and the actual folder name in there starts with a <code>@</code>. Using only <code>@</code> kind of breaks the pattern compared to non-scoped node modules, for which <code>~</code> prefix is needed according to both PhpStorm and Nuxt.js.</p>