From 99f9b3acfd4fc20e122f8bbe6b1e5b1f0e2551a7 Mon Sep 17 00:00:00 2001
From: Ryan Weaver <ryan@thatsquality.com>
Date: Fri, 16 Jun 2017 12:35:26 -0400
Subject: [PATCH] adding note about extracting CSS

---
 frontend/encore/shared-entry.rst | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/encore/shared-entry.rst b/frontend/encore/shared-entry.rst
index 227bf343367..e4a2678216f 100644
--- a/frontend/encore/shared-entry.rst
+++ b/frontend/encore/shared-entry.rst
@@ -15,7 +15,14 @@ that's included on every page:
 
         // this creates a 'vendor.js' file with jquery and the bootstrap JS module
         // these modules will *not* be included in page1.js or page2.js anymore
-        .createSharedEntry('vendor', ['jquery', 'bootstrap'])
+        .createSharedEntry('vendor', [
+            'jquery',
+            'bootstrap',
+
+            // you can also extract CSS - this will create a 'vendor.css' file
+            // this CSS will *not* be included in page1.css or page2.css anymore
+            'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
+        ])
 
 As soon as you make this change, you need to include two extra JavaScript files
 on your page before any other JavaScript file:
@@ -29,6 +36,9 @@ on your page before any other JavaScript file:
     <!-- here you link to the specific JS files needed by the current page -->
     <script src="{{ asset('build/app.js') }}"></script>
 
+    <!-- if you extracted some CSS, include vendor.css -->
+    <link rel="stylesheet" href="{{ asset('build/vendor.css') }}" />
+
 The ``vendor.js`` file contains all the common code that has been extracted from
 the other files, so it's obvious that it must be included. The other file (``manifest.js``)
 is less obvious: it's needed so that Webpack knows how to load those shared modules.