Overwrite sass imports with parcel's resolver

src/assets/SASSAsset.js

@@ -3,6 +3,8 @@ const localRequire = require('../utils/localRequire');
 const promisify = require('../utils/promisify');
 const path = require('path');
 const os = require('os');
+const Resolver = require('../Resolver');
+const syncPromise = require('../utils/syncPromise');
 
 class SASSAsset extends Asset {
   constructor(name, pkg, options) {
@@ -14,6 +16,10 @@ class SASSAsset extends Asset {
     // node-sass should be installed locally in the module that's being required
     let sass = await localRequire('node-sass', this.name);
     let render = promisify(sass.render.bind(sass));
+    const resolver = new Resolver({
+      extensions: ['.scss', '.sass'],
+      rootDir: this.options.rootDir
+    });
 
     let opts =
       this.package.sass ||
@@ -35,6 +41,20 @@ class SASSAsset extends Asset {
       }
     });
 
+    opts.importer = (url, prev, done) => {
+      let resolved;
+      try {
+        resolved = syncPromise(
+          resolver.resolve(url, prev === 'stdin' ? this.name : prev)
+        ).path;
+      } catch (e) {
+        resolved = url;
+      }
+      return done({
+        file: resolved
+      });
+    };
+
     return await render(opts);
   }
 

test/integration/sass-advanced-import/hello.sass

@@ -0,0 +1,2 @@
+.hello
+  color: blue;

test/integration/sass-advanced-import/index.sass

@@ -0,0 +1,5 @@
+@import '~/hello.sass';
+
+.index
+  background: #ffffff;
+  color: #000000;

test/sass.js

@@ -172,4 +172,18 @@ describe('sass', function() {
     let css = fs.readFileSync(__dirname + '/dist/index.css', 'utf8');
     assert(css.includes('._index_1a1ih_1'));
   });
+
+  it('should support advanced import syntax', async function() {
+    let b = await bundle(
+      __dirname + '/integration/sass-advanced-import/index.sass'
+    );
+
+    assertBundleTree(b, {
+      name: 'index.css',
+      assets: ['index.sass']
+    });
+
+    let css = fs.readFileSync(__dirname + '/dist/index.css', 'utf8');
+    assert(css.includes('color: blue;'));
+  });
 });