@@ -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 JavaScript:
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
- 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.
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 maps to 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.
140
+
114
141
Requiring JavaScript Modules
115
142
----------------------------
116
143
0 commit comments