chore(): sass support

Author: jkuri

addon/ng2/models/webpack-build-common.ts

@@ -53,7 +53,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
         { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
         { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
         { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
         { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'},
         { test: /\.html$/, loader: 'raw-loader' }
       ]

addon/ng2/models/webpack-build-test.js

@@ -60,7 +60,7 @@ const getWebpackTestConfig = function(projectRoot, sourceDir) {
         { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
         { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
         { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
         { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' },
         { test: /\.html$/, loader: 'raw-loader', exclude: [path.resolve(projectRoot, `./${sourceDir}/index.html`)] }
       ],

tests/e2e/e2e_workflow.spec.js

@@ -326,6 +326,37 @@ describe('Basic end-to-end Workflow', function () {
     sh.rm('-f', scssPartialFile);
   });
 
+  it_not_mobile('Supports sass in styleUrls', function() {
+    this.timeout(420000);
+
+    let cssFilename = 'app.component.css';
+    let sassFilename = 'app.component.sass';
+    let componentPath = path.join(process.cwd(), 'src', 'app');
+    let componentFile = path.join(componentPath, 'app.component.ts');
+    let cssFile = path.join(componentPath, cssFilename);
+    let sassFile = path.join(componentPath, sassFilename);
+    let sassExample = '@import "app.component.partial";\n\n.outer\n  .inner\n    background: #fff';
+    let sassPartialFile = path.join(componentPath, '_app.component.partial.sass');
+    let sassPartialExample = '.partial\n  @extend .outer';
+    let componentContents = fs.readFileSync(componentFile, 'utf8');
+
+    sh.mv(cssFile, sassFile);
+    fs.writeFileSync(sassFile, sassExample, 'utf8');
+    fs.writeFileSync(sassPartialFile, sassPartialExample, 'utf8');
+    fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), sassFilename), 'utf8');
+
+    sh.exec(`${ngBin} build`);
+    let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js');
+    let contents = fs.readFileSync(destCssBundle, 'utf8');
+    expect(contents).to.include('.outer .inner');
+    expect(contents).to.include('.partial .inner');
+
+    sh.mv(sassFile, cssFile);
+    fs.writeFileSync(cssFile, '', 'utf8');
+    fs.writeFileSync(componentFile, componentContents, 'utf8');
+    sh.rm('-f', sassPartialFile);
+  });
+
   // Mobile mode doesn't have styles
   it_not_mobile('Supports less in styleUrls', function() {
     this.timeout(420000);