feat: import scss files with "~" syntax from node_modules (#67)

Adds a custom importer function to node-sass to transform tilde paths similar to the custom importer feature of webpack's sass-loader.

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

integration/sample_material/baz/baz.component.html

@@ -0,0 +1 @@
+<h1 class="baz">baz!</h1>

integration/sample_material/baz/baz.component.scss

@@ -0,0 +1,5 @@
+@import '~node-sass/test/fixtures/include-files/file-not-processed-by-loader';
+
+.baz {
+    color: $variable-defined-by-file-not-processed-by-loader;
+}

integration/sample_material/baz/baz.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'baz-component',
+  templateUrl: './baz.component.html',
+  styleUrls: ['./baz.component.scss']
+})
+export class BazComponent {
+}

integration/sample_material/public_api.ts

@@ -1,3 +1,4 @@
 export * from './bar/bar.component';
 export * from './foo/foo.component';
+export * from './baz/baz.component';
 export * from './ui-lib.module';

integration/sample_material/specs/assets.ts

@@ -0,0 +1,34 @@
+import { expect } from 'chai';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe(`@sample/material`, () => {
+
+  describe(`material.umd.js`, () => {
+    let GENERATED;
+    before(() => {
+      GENERATED = require(path.resolve(__dirname, '..', 'dist', 'bundles', 'material.umd.js'));
+    });
+
+    it(`should exist`, () => {
+      expect(GENERATED.BazComponent).to.be.ok;
+    });
+
+    it(`should have "BazComponent"`, () => {
+      expect(GENERATED).to.be.ok;
+    });
+
+    it(`should have "BazComponent.decorators"`, () => {
+      expect(GENERATED.BazComponent.decorators).to.be.ok;
+    });
+
+    it(`should have styles for "BazComponent"`, () => {
+      expect(GENERATED.BazComponent.decorators[0].args[0].styles).to.be.ok;
+    });
+
+    it(`should have style with: "color: red"`, () => {
+      expect(GENERATED.BazComponent.decorators[0].args[0].styles[0]).to.have.string('color: "red"');
+    });
+
+  });
+});

integration/sample_material/ui-lib.module.ts

@@ -2,17 +2,20 @@ import { NgModule } from '@angular/core';
 import { FooComponent } from './foo/foo.component';
 import { BarComponent } from './bar/bar.component';
 import { FooBarComponent } from './foo-bar/foo-bar.component';
+import { BazComponent } from './baz/baz.component';
 
 @NgModule({
   declarations: [
     FooComponent,
     BarComponent,
     FooBarComponent,
+    BazComponent,
   ],
   exports: [
     FooComponent,
     BarComponent,
     FooBarComponent,
+    BazComponent,
   ]
 })
 export class UiLibModule {}

lib/steps/assets.ts

@@ -60,14 +60,23 @@ export const processAssets = (src: string, dest: string): Promise<any> => {
 }
 
 
+const sassImporter = (url: string): any => {
+  if (url[0] === '~') {
+    url = path.resolve('node_modules', url.substr(1));
+  }
+
+  return { file: url };
+}
+
+
 const pickRenderer = (filePath: string, ext: string[], file: string): Promise<string> => {
 
   switch (path.extname(filePath)) {
 
     case '.scss':
     case '.sass':
       debug(`rendering sass for ${filePath}`);
-      return renderSass({ file: filePath });
+      return renderSass({ file: filePath, importer: sassImporter });
 
     case '.css':
     default: