diff --git a/packages/angular-cli/models/webpack-build-utils.ts b/packages/angular-cli/models/webpack-build-utils.ts index 13fd6eedee51..40d870a2f1d9 100644 --- a/packages/angular-cli/models/webpack-build-utils.ts +++ b/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' }) }))); diff --git a/tests/e2e/tests/build/styles/loaders.ts b/tests/e2e/tests/build/styles/loaders.ts new file mode 100644 index 000000000000..9a2121c8f7dd --- /dev/null +++ b/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:/))); +}