fix(webpack): correctly load component stylesheets (angular#3511)

Author: clydin

packages/angular-cli/models/webpack-build-utils.ts

@@ -67,7 +67,7 @@ export function makeCssLoaders(stylePaths: string[] = []) {
     { test: /\.styl$/, loaders: ['stylus-loader'] }
   ];
 
-  const commonLoaders = ['css-loader', 'postcss-loader'];
+  const commonLoaders = ['postcss-loader'];
 
   // load component css as raw strings
   let cssLoaders: any = baseRules.map(({test, loaders}) => ({
@@ -78,7 +78,7 @@ export function makeCssLoaders(stylePaths: string[] = []) {
     // load global css as css files
     cssLoaders.push(...baseRules.map(({test, loaders}) => ({
       include: stylePaths, test, loaders: ExtractTextPlugin.extract({
-        loader: [...commonLoaders, ...loaders],
+        loader: ['css-loader', ...commonLoaders, ...loaders],
         fallbackLoader: 'style-loader'
       })
     })));

tests/e2e/tests/build/styles/loaders.ts

@@ -0,0 +1,39 @@
+import {
+  writeMultipleFiles,
+  deleteFile,
+  expectFileToMatch,
+  replaceInFile
+} from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { stripIndents } from 'common-tags';
+import { updateJsonFile } from '../../../utils/project';
+import { expectToFail } from '../../../utils/utils';
+
+export default function () {
+  return writeMultipleFiles({
+    'src/styles.scss': stripIndents`
+      @import './imported-styles.scss';
+      body { background-color: blue; }
+    `,
+    'src/imported-styles.scss': stripIndents`
+      p { background-color: red; }
+    `,
+    'src/app/app.component.scss': stripIndents`
+        .outer {
+          .inner {
+            background: #fff;
+          }
+        }
+      `})
+    .then(() => deleteFile('src/app/app.component.css'))
+    .then(() => updateJsonFile('angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['styles'] = ['styles.scss'];
+    }))
+    .then(() => replaceInFile('src/app/app.component.ts',
+      './app.component.css', './app.component.scss'))
+    .then(() => ng('build'))
+    .then(() => expectToFail(() => expectFileToMatch('dist/styles.bundle.css', /exports/)))
+    .then(() => expectToFail(() => expectFileToMatch('dist/main.bundle.js',
+      /".*module\.exports.*\.outer.*background:/)));
+}