fix(#2148): Use static files for styles

Uses extract-loader to prepare static files for styles rather than use style-loader and thus avoids FOUC.
angular · Oct 11, 2016 · 99d655f · 99d655f
1 parent 2225027
commit 99d655f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-loader": "^0.0.2",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",

diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts
@@ -71,23 +71,46 @@ export function getWebpackCommonConfig(
           loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
         },
 
-        // outside of main, load it via style-loader
+        // outside of main, extract static css files using extract and file loaders.
         {
           include: styles,
           test: /\.css$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader'
+          ]
         }, {
           include: styles,
           test: /\.styl$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'stylus-loader'
+          ]
         }, {
           include: styles,
           test: /\.less$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'less-loader'
+          ]
         }, {
           include: styles,
           test: /\.scss$|\.sass$/,
-          loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+          loaders: [
+            'file-loader?name=[name].css',
+            'extract-loader',
+            'css-loader',
+            'postcss-loader',
+            'sass-loader'
+          ]
         },
 
         // load global scripts using script-loader
@@ -120,7 +143,7 @@ export function getWebpackCommonConfig(
       ),
       new webpack.optimize.CommonsChunkPlugin({
         // Optimizing ensures loading order in index.html
-        name: ['styles', 'scripts', 'main'].reverse()
+        name: ['scripts', 'main'].reverse()
       }),
       new webpack.optimize.CommonsChunkPlugin({
         minChunks: Infinity,

diff --git a/packages/angular-cli/package.json b/packages/angular-cli/package.json
@@ -48,6 +48,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-loader": "^0.0.2",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "fs.realpath": "^1.0.0",