Parcel: 🙋 allow custom importer feature for sass-loader – @import "~packagename/foo/bar";

[m5o]

:octocat: via: https://github.com/webpack-contrib/sass-loader#imports

webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import:

@import "~bootstrap/scss/bootstrap";

🤔 Expected Behavior

Allow shorthand import of @import "~bootstrap/scss/_functions.scss"; instead of
@import "../node_modules/bootstrap/scss/_functions.scss";

No build error 😬

😯 Current Behavior

🚨 File to import not found or unreadable: ~bootstrap/scss/_functions.scss.

📺 Example App

:octocat: https://github.com/m5o/parcel-vue-svg-demo

💻 Code Sample

# test.vue
<template>
  <div></div>
</template>

<script>
</script>

<style lang="scss" scoped>
  @import "~bootstrap/scss/_functions.scss";
  @import "../node_modules/bootstrap/scss/_variables.scss";
  @import "../node_modules/bootstrap/scss/_mixins.scss";

  .some-more-css {
    background: blue;
  }
</style>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.7.0
| vue | 2.5.16

[DeMoorJasper]

Tilde paths (e.g. ~/foo) resolved relative to the nearest package root in node_modules, or the project root if not in node_modules. Closes #336, closes #466.

So your import should be this: @import "~/node-modules/bootstrap/scss/_functions.scss";

On second thought you should be able to import them like this?
@import "bootstrap/scss/_functions.scss";

[m5o]

Hey @DeMoorJasper – Thank you for your suggestions. Sadly none of the path adjustments work. It's booth throwing the File to import not found or unreadable error.

The project structure should be pretty normal, I could also share the whole project if it's help.

Directory Structure

├── assets
│   └── application.scss
├── components
│   ├── app.vue
│   └── pie.vue
├── index.html
├── main.js
├── node_modules
│   ├── @vue
│   └── […]
└── package.json

[DeMoorJasper]

@m5o Creating a test repo would help.
However I've just seen u are using sass which is sadly enough not supported that well on parcel, due to node-sass not enabling us to overwrite their import resolving mechanism.
But I can try it if you send over a test repo

[m5o]

@DeMoorJasper – :octocat: https://github.com/m5o/parcel-vue-svg-demo

[DeMoorJasper]

I've pinpointed the problem and found a solution.

[m5o]

Wow! Thank you @DeMoorJasper 🤓

[m5o]

ℹ️ Updated my example repo to latest parcel-bundler v1.8.1 – details: https://github.com/m5o/parcel-vue-svg-demo/commit/f4770cfc2b20bd657b0636579f5ababc93bfc8d3

FYI – is this matching your expected behaviour @DeMoorJasper ?

🛑 is not working 
@import "~bootstrap/scss/_variables.scss";

✅ is working
@import "bootstrap/scss/_variables.scss";

[m5o]

🔗 https://github.com/parcel-bundler/parcel/pull/1335