feat: resolve "~" scss import statements to nearest node_modules (#352)

Uses 'node-sass-tilde-importer'  to resolve imports during scss transformation. See https://www.npmjs.com/package/node-sass-tilde-importer

Resolves #346

Author: dherges

package.json

@@ -35,6 +35,7 @@
     "less": "^2.7.2",
     "lodash": "^4.17.4",
     "node-sass": "^4.5.3",
+    "node-sass-tilde-importer": "^1.0.0",
     "postcss": "^6.0.2",
     "read-file": "^0.2.0",
     "rimraf": "^2.6.1",

src/lib/steps/assets.ts

@@ -9,6 +9,7 @@ import * as autoprefixer from 'autoprefixer';
 import * as browserslist from 'browserslist';
 import * as postcss from 'postcss';
 import * as sass from 'node-sass';
+import * as nodeSassTildeImporter from 'node-sass-tilde-importer';
 import * as less from 'less';
 import * as stylus from 'stylus';
 
@@ -99,7 +100,7 @@ async function renderPreProcessor(filePath: string, srcPath: string): Promise<st
     case '.scss':
     case '.sass':
       log.debug(`rendering sass from ${filePath}`);
-      return await renderSass({ file: filePath, importer: sassImporter });
+      return await renderSass({ file: filePath, importer: nodeSassTildeImporter });
 
     case '.less':
       log.debug(`rendering less from ${filePath}`);
@@ -118,15 +119,6 @@ async function renderPreProcessor(filePath: string, srcPath: string): Promise<st
 
 }
 
-// TODO: use node-sass-magic-importer
-const sassImporter = (url: string): any => {
-  if (url[0] === '~') {
-    url = path.resolve('node_modules', url.substr(1));
-  }
-
-  return { file: url };
-}
-
 const renderSass = (sassOpts: any): Promise<string> => {
 
   return new Promise((resolve, reject) => {

yarn.lock

@@ -1146,6 +1146,10 @@ find-index@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
 
+find-parent-dir@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2197,6 +2201,12 @@ node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
+node-sass-tilde-importer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-sass-tilde-importer/-/node-sass-tilde-importer-1.0.0.tgz#653d048a270464a1865ef9a99cc80ee2d80f9c97"
+  dependencies:
+    find-parent-dir "^0.3.0"
+
 node-sass@^4.5.3:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"