Skip to content

[Encore] Don't enable the Sass loader at the beginning of the First Example page #9526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 16, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 39 additions & 12 deletions frontend/encore/simple-example.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@ Imagine you have a simple project with one CSS and one JS file, organized into
an ``assets/`` directory:

* ``assets/js/app.js``
* ``assets/css/app.scss``
* ``assets/css/app.css``

With Encore, you should think of CSS as a *dependency* of your JavaScript. This means,
you will *require* whatever CSS you need from inside JavaScript:

.. code-block:: javascript

// assets/js/app.js
require('../css/app.scss');
require('../css/app.css');

// ...rest of JavaScript code here

With Encore, we can easily minify these files, pre-process ``app.scss``
through Sass and a *lot* more.
With Encore, we can easily minify these files, pre-process ``app.css``
through PostCSS and a *lot* more.

Configuring Encore/Webpack
--------------------------
Expand All @@ -41,12 +41,10 @@ Inside, use Encore to help generate your Webpack configuration.
// will create web/build/app.js and web/build/app.css
.addEntry('app', './assets/js/app.js')

// allow sass/scss files to be processed
.enableSassLoader()

// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()

// enable source maps during development
.enableSourceMaps(!Encore.isProduction())

// empty the outputPath dir before each build
Expand All @@ -57,13 +55,16 @@ Inside, use Encore to help generate your Webpack configuration.

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()

// allow sass/scss files to be processed
// .enableSassLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

This is already a rich setup: it outputs 2 files, uses the Sass pre-processor and
enables source maps to help debugging.
This is already a rich setup: it outputs 2 files and enables source maps
to help debugging.

.. _encore-build-assets:

Expand All @@ -89,9 +90,6 @@ To build the assets, use the ``encore`` executable:

Re-run ``encore`` each time you update your ``webpack.config.js`` file.

Actually, to use ``enableSassLoader()``, you'll need to install a few
more packages. But Encore will tell you *exactly* what you need.

After running one of these commands, you can now add ``script`` and ``link`` tags
to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
In Symfony, use the ``asset()`` helper:
Expand All @@ -111,6 +109,35 @@ In Symfony, use the ``asset()`` helper:
</body>
</html>

Using Sass
----------------------------

Instead of using plain CSS you can also use Sass.

In order to do so, simply change the extension of the ``app.css`` file
to ``.sass`` or ``.scss`` (based on the syntax you want to use):

.. code-block:: diff

// assets/js/app.js
- require('../css/app.css');
+ require('../css/app.scss');

And enable the Sass pre-processor:

.. code-block:: diff

// webpack.config.js
Encore
// ...

// allow sass/scss files to be processed
- // .enableSassLoader()
+ .enableSassLoader()

To use ``enableSassLoader()``, you'll also need to install a few more packages.
But Encore will tell you *exactly* which ones when running it.

Requiring JavaScript Modules
----------------------------

Expand Down