Skip to content

Commit 18586e2

Browse files
Lyrkanjaviereguiluz
authored andcommitted
[Encore] Don't enable the Sass loader at the beginning of the First Example page
1 parent 16faf60 commit 18586e2

File tree

1 file changed

+39
-12
lines changed

1 file changed

+39
-12
lines changed

frontend/encore/simple-example.rst

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ Imagine you have a simple project with one CSS and one JS file, organized into
55
an ``assets/`` directory:
66

77
* ``assets/js/app.js``
8-
* ``assets/css/app.scss``
8+
* ``assets/css/app.css``
99

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

1313
.. code-block:: javascript
1414
1515
// assets/js/app.js
16-
require('../css/app.scss');
16+
require('../css/app.css');
1717
1818
// ...rest of JavaScript code here
1919
20-
With Encore, we can easily minify these files, pre-process ``app.scss``
21-
through Sass and a *lot* more.
20+
With Encore, we can easily minify these files, pre-process ``app.css``
21+
through PostCSS and a *lot* more.
2222

2323
Configuring Encore/Webpack
2424
--------------------------
@@ -41,12 +41,10 @@ Inside, use Encore to help generate your Webpack configuration.
4141
// will create web/build/app.js and web/build/app.css
4242
.addEntry('app', './assets/js/app.js')
4343
44-
// allow sass/scss files to be processed
45-
.enableSassLoader()
46-
4744
// allow legacy applications to use $/jQuery as a global variable
4845
.autoProvidejQuery()
4946
47+
// enable source maps during development
5048
.enableSourceMaps(!Encore.isProduction())
5149
5250
// empty the outputPath dir before each build
@@ -57,13 +55,16 @@ Inside, use Encore to help generate your Webpack configuration.
5755
5856
// create hashed filenames (e.g. app.abc123.css)
5957
// .enableVersioning()
58+
59+
// allow sass/scss files to be processed
60+
// .enableSassLoader()
6061
;
6162
6263
// export the final configuration
6364
module.exports = Encore.getWebpackConfig();
6465
65-
This is already a rich setup: it outputs 2 files, uses the Sass pre-processor and
66-
enables source maps to help debugging.
66+
This is already a rich setup: it outputs 2 files and enables source maps
67+
to help debugging.
6768

6869
.. _encore-build-assets:
6970

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

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

92-
Actually, to use ``enableSassLoader()``, you'll need to install a few
93-
more packages. But Encore will tell you *exactly* what you need.
94-
9593
After running one of these commands, you can now add ``script`` and ``link`` tags
9694
to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
9795
In Symfony, use the ``asset()`` helper:
@@ -111,6 +109,35 @@ In Symfony, use the ``asset()`` helper:
111109
</body>
112110
</html>
113111
112+
Using Sass
113+
----------------------------
114+
115+
Instead of using plain CSS you can also use Sass.
116+
117+
In order to do so, simply change the extension of the ``app.css`` file
118+
to ``.sass`` or ``.scss`` (based on the syntax you want to use):
119+
120+
.. code-block:: diff
121+
122+
// assets/js/app.js
123+
- require('../css/app.css');
124+
+ require('../css/app.scss');
125+
126+
And enable the Sass pre-processor:
127+
128+
.. code-block:: diff
129+
130+
// webpack.config.js
131+
Encore
132+
// ...
133+
134+
// allow sass/scss files to be processed
135+
- // .enableSassLoader()
136+
+ .enableSassLoader()
137+
138+
To use ``enableSassLoader()``, you'll also need to install a few more packages.
139+
But Encore will tell you *exactly* which ones when running it.
140+
114141
Requiring JavaScript Modules
115142
----------------------------
116143

0 commit comments

Comments
 (0)