From 5f815e63a56d1693980722d71ee439d740ca98ad Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Mon, 12 Jun 2017 22:13:13 -0400 Subject: [PATCH 1/5] Tweaks thanks to @bocharsky-bw --- frontend/encore/bootstrap.rst | 5 +++-- frontend/encore/installation.rst | 8 ++++---- frontend/encore/simple-example.rst | 23 +++++++++++------------ 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/frontend/encore/bootstrap.rst b/frontend/encore/bootstrap.rst index f48d5b542b2..d3966fe7fa4 100644 --- a/frontend/encore/bootstrap.rst +++ b/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: diff --git a/frontend/encore/installation.rst b/frontend/encore/installation.rst index bae06fe840f..1d2a7feed2a 100644 --- a/frontend/encore/installation.rst +++ b/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/ diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst index b0dd4f39f0a..31858b91239 100644 --- a/frontend/encore/simple-example.rst +++ b/frontend/encore/simple-example.rst @@ -139,7 +139,15 @@ may want also to :doc:`create a 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 +157,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 From 3377b927bde96edb6913d9e511524884198b4b13 Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Tue, 13 Jun 2017 06:30:34 -0400 Subject: [PATCH 2/5] re-ordering indexes, so that next goes into Encore --- frontend.rst | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend.rst b/frontend.rst index 325e33964b4..435d3efb4c0 100644 --- a/frontend.rst +++ b/frontend.rst @@ -66,16 +66,16 @@ Other Front-End Articles ........................ .. toctree:: - :maxdepth: 1 + :hidden: :glob: - frontend/* + 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/ From 2017e5ac671beeb153154ea4be4583e3388b8c9d Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Tue, 13 Jun 2017 06:31:14 -0400 Subject: [PATCH 3/5] tweak --- frontend/encore/simple-example.rst | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/encore/simple-example.rst b/frontend/encore/simple-example.rst index 31858b91239..3b3b64252ae 100644 --- a/frontend/encore/simple-example.rst +++ b/frontend/encore/simple-example.rst @@ -146,6 +146,7 @@ Above, you created an entry called ``app`` that pointed to ``main.js``: Encore // ... .addEntry('app', './assets/js/main.js') + ; Once inside ``main.js``, you can even require CSS files: From ce95648287da03cb7fc53cd31770ddfc3e46e5eb Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Tue, 13 Jun 2017 06:32:38 -0400 Subject: [PATCH 4/5] making sure some articles are ordered --- frontend.rst | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend.rst b/frontend.rst index 435d3efb4c0..7dab845044d 100644 --- a/frontend.rst +++ b/frontend.rst @@ -69,6 +69,8 @@ Other Front-End Articles :hidden: :glob: + frontend/encore/installation + frontend/encore/simple-example frontend/encore/* .. toctree:: From 17cd8e995b070289446d433992cf7059ef113d34 Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Tue, 13 Jun 2017 08:47:45 -0400 Subject: [PATCH 5/5] Making title more specific --- frontend/encore/installation.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/encore/installation.rst b/frontend/encore/installation.rst index 1d2a7feed2a..9ccfdf405dc 100644 --- a/frontend/encore/installation.rst +++ b/frontend/encore/installation.rst @@ -1,5 +1,5 @@ -Installation -============ +Encore Installation +=================== First, make sure you `install Node.js`_ and also the `Yarn package manager`_.