Encore tweaks!

frontend.rst

@@ -66,16 +66,18 @@ Other Front-End Articles
 ........................
 
 .. toctree::
-    :maxdepth: 1
+    :hidden:
     :glob:
 
-    frontend/*
+    frontend/encore/installation
+    frontend/encore/simple-example
+    frontend/encore/*
 
 .. toctree::
-    :hidden:
+    :maxdepth: 1
     :glob:
 
-    frontend/encore/*
+    frontend/*
 
 .. _`Webpack Encore`: https://www.npmjs.com/package/@symfony/webpack-encore
 .. _`Webpack`: https://webpack.js.org/

frontend/encore/bootstrap.rst

@@ -21,7 +21,7 @@ a ``global.scss`` file, import it from there:
     // assets/css/global.scss
 
     // customize some Bootstrap variables
-    $brand-primary:         darken(#428bca, 20%);
+    $brand-primary: darken(#428bca, 20%);
 
     // the ~ allows you to reference things in node_modules
     @import '~bootstrap-sass/assets/stylesheets/bootstrap';
@@ -41,7 +41,7 @@ this, you can use the ``resolve_url_loader`` option:
 
     // webpack.config.js
     Encore
-    +     enableSassLoader({
+    +     .enableSassLoader({
     +         'resolve_url_loader' => false
     +     })
     ;
@@ -79,6 +79,7 @@ Next, make sure to call ``.autoProvidejQuery()`` in your ``webpack.config.js`` f
     Encore
         // ...
     +     .autoProvidejQuery()
+    ;
 
 This is needed because Bootstrap expects jQuery to be available as a global
 variable. Now, require bootstrap from any of your JavaScript files:

frontend/encore/installation.rst

@@ -1,9 +1,9 @@
 Installation
 ============
 
-First, make sure you `install Node.js`_ and also the `yarn package manager`_.
+First, make sure you `install Node.js`_ and also the `Yarn package manager`_.
 
-Then, install Encore into your project with yarn:
+Then, install Encore into your project with Yarn:
 
 .. code-block:: terminal
 
@@ -21,11 +21,11 @@ is also created/updated. When using npm 5, a ``package-lock.json`` file is creat
 .. tip::
 
     You should commit ``package.json`` and ``yarn.lock`` (or ``package-lock.json``
-    if using npm) to version control, but ignore ``node_modules/``.
+    if using npm 5) to version control, but ignore ``node_modules/``.
 
 Next, create your ``webpack.config.js`` in :doc:`/frontend/encore/simple-example`!
 
 .. _`install Node.js`: https://nodejs.org/en/download/
-.. _`yarn package manager`: https://yarnpkg.com/lang/en/docs/install/
+.. _`Yarn package manager`: https://yarnpkg.com/lang/en/docs/install/
 .. _`npm`: https://www.npmjs.com/
 .. _`yarn`: https://yarnpkg.com/

frontend/encore/simple-example.rst

@@ -139,7 +139,16 @@ may want also to :doc:`create a shared entry </frontend/encore/shared-entry>` fo
 Requiring CSS Files from JavaScript
 -----------------------------------
 
-You can also require CSS files from your JavaScript:
+Above, you created an entry called ``app`` that pointed to ``main.js``:
+
+.. code-block:: javascript
+
+    Encore
+        // ...
+        .addEntry('app', './assets/js/main.js')
+    ;
+
+Once inside ``main.js``, you can even require CSS files:
 
 .. code-block:: javascript
 
@@ -149,17 +158,8 @@ You can also require CSS files from your JavaScript:
     // a CSS file with the same name as the entry js will be output
     require('../css/main.scss');
 
-In this case, ``main.js`` is being added to an entry called ``app`` in ``webpack.config.js``:
-
-.. code-block:: javascript
-
-    Encore
-        // ...
-        .addEntry('app', './assets/js/main.js')
-
-As soon as you require a CSS file, both an ``app.js`` **and** an ``app.css`` file
-will be created. You'll need to add a link tag to the ``app.css`` file in your
-templates:
+Now, both an ``app.js`` **and** an ``app.css`` file will be created. You'll need
+to add a link tag to the ``app.css`` file in your templates:
 
 .. code-block:: diff