You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: frontend/encore/simple-example.rst
+39-12Lines changed: 39 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,20 +5,20 @@ Imagine you have a simple project with one CSS and one JS file, organized into
5
5
an ``assets/`` directory:
6
6
7
7
* ``assets/js/app.js``
8
-
* ``assets/css/app.scss``
8
+
* ``assets/css/app.css``
9
9
10
10
With Encore, you should think of CSS as a *dependency* of your JavaScript. This means,
11
11
you will *require* whatever CSS you need from inside #"diff-885f6ae5827b90e111ec4cc3967ac27115947b60643d0cca2ebc5c83ee575fde-12-12-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">12
12
13
13
..code-block::javascript
14
14
15
15
// assets/js/app.js
16
-
require('../css/app.scss');
16
+
require('../css/app.css');
17
17
18
18
// ...rest of JavaScript code here
19
19
20
-
With Encore, we can easily minify these files, pre-process ``app.scss``
21
-
throughSass and a *lot* more.
20
+
With Encore, we can easily minify these files, pre-process ``app.css``
21
+
throughPostCSS and a *lot* more.
22
22
23
23
Configuring Encore/Webpack
24
24
--------------------------
@@ -41,12 +41,10 @@ Inside, use Encore to help generate your Webpack configuration.
41
41
// will create web/build/app.js and web/build/app.css
42
42
.addEntry('app','./assets/js/app.js')
43
43
44
-
// allow sass/scss files to be processed
45
-
.enableSassLoader()
46
-
47
44
// allow legacy applications to use $/jQuery as a global variable
48
45
.autoProvidejQuery()
49
46
47
+
// enable source maps during development
50
48
.enableSourceMaps(!Encore.isProduction())
51
49
52
50
// empty the outputPath dir before each build
@@ -57,13 +55,16 @@ Inside, use Encore to help generate your Webpack configuration.
57
55
58
56
// create hashed filenames (e.g. app.abc123.css)
59
57
// .enableVersioning()
58
+
59
+
// allow sass/scss files to be processed
60
+
// .enableSassLoader()
60
61
;
61
62
62
63
// export the final configuration
63
64
module.exports=Encore.getWebpackConfig();
64
65
65
-
This is already a rich setup: it outputs 2 files, uses the Sass pre-processor and
66
-
enables source mapsto help debugging.
66
+
This is already a rich setup: it outputs 2 files and enables source maps
67
+
to help debugging.
67
68
68
69
.. _encore-build-assets:
69
70
@@ -89,9 +90,6 @@ To build the assets, use the ``encore`` executable:
89
90
90
91
Re-run ``encore`` each time you update your ``webpack.config.js`` file.
91
92
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
-
95
93
After running one of these commands, you can now add ``script`` and ``link`` tags
96
94
to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
97
95
In Symfony, use the ``asset()`` helper:
@@ -111,6 +109,35 @@ In Symfony, use the ``asset()`` helper:
111
109
</body>
112
110
</html>
113
111
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.