fix: handle importing Sass partials in node_modules (#90)

* fix: handle importing Sass partials in node_modules

* tweaks

src/sass-loader.js

@@ -5,6 +5,13 @@ import importCwd from 'import-cwd'
 
 const moduleRe = /^~([a-z0-9]|@).+/i
 
+const getUrlOfPartial = url => {
+  const parsedUrl = path.parse(url)
+  return `${parsedUrl.dir}${path.sep}_${parsedUrl.base}`
+}
+
+const resolvePromise = pify(resolve)
+
 export default {
   name: 'sass',
   test: /\.s[ac]ss$/,
@@ -16,22 +23,43 @@ export default {
       data: code,
       indentedSyntax: /\.sass$/.test(this.id),
       sourceMap: this.sourceMap,
-      importer: [(url, importer, done) => {
-        if (!moduleRe.test(url)) return done({ file: url })
-
-        resolve(url.slice(1), {
-          basedir: path.dirname(importer),
-          extensions: ['.scss', '.sass', '.css']
-        }, (err, id) => {
-          if (err) {
-            return Promise.reject(err)
+      importer: [
+        (url, importer, done) => {
+          if (!moduleRe.test(url)) return done({ file: url })
+
+          const moduleUrl = url.slice(1)
+          const partialUrl = getUrlOfPartial(moduleUrl)
+
+          const options = {
+            basedir: path.dirname(importer),
+            extensions: ['.scss', '.sass', '.css']
           }
-          done({
-            // Do not add `.css` extension in order to inline the file
-            file: id.endsWith('.css') ? id.replace(/\.css$/, '') : id
-          })
-        })
-      }].concat(this.options.importer || [])
+          const finishImport = id => {
+            done({
+              // Do not add `.css` extension in order to inline the file
+              file: id.endsWith('.css') ? id.replace(/\.css$/, '') : id
+            })
+          }
+
+          const next = () => {
+            // Catch all resolving errors, return the original file and pass responsibility back to other custom importers
+            done({ file: url })
+          }
+
+          // Give precedence to importing a partial
+          resolvePromise(partialUrl, options)
+            .then(finishImport)
+            .catch(err => {
+              if (err.code === 'MODULE_NOT_FOUND' || err.code === 'ENOENT') {
+                resolvePromise(moduleUrl, options)
+                  .then(finishImport)
+                  .catch(next)
+              } else {
+                next()
+              }
+            })
+        }
+      ].concat(this.options.importer || [])
     })
 
     return {

test/fixtures/sass-import/_partial.scss

@@ -0,0 +1 @@
+$color: magenta;

test/fixtures/sass-import/foo.scss

@@ -1,3 +1,5 @@
+@import "partial";
+
 .foo {
-  color: magenta;
+  color: $color;
 }

test/fixtures/sass-import/style.scss

@@ -1,4 +1,5 @@
 @import "~foo/bar/a";
 @import "~foo/bar/b";
 @import "~foo/bar/c";
+@import "~foo/bar/partial";
 @import "foo.scss";