diff --git a/frontend.rst b/frontend.rst index 325e33964b4..7dab845044d 100644 --- a/frontend.rst +++ b/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/ 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..9ccfdf405dc 100644 --- a/frontend/encore/installation.rst +++ b/frontend/encore/installation.rst @@ -1,9 +1,9 @@ -Installation -============ +Encore 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..3b3b64252ae 100644 --- a/frontend/encore/simple-example.rst +++ b/frontend/encore/simple-example.rst @@ -139,7 +139,16 @@ 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 +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