@@ -43,7 +43,8 @@ See :doc:`/frontend/encore/dev-server` for more details.
43
43
JSX Support
44
44
-----------
45
45
46
- You can enable `JSX with Vue.js `_ by configuring the 2nd parameter of the ``.enableVueLoader() `` method:
46
+ You can enable `JSX with Vue.js `_ by configuring the second parameter of the
47
+ ``.enableVueLoader() `` method:
47
48
48
49
.. code-block :: diff
49
50
@@ -60,17 +61,17 @@ You can enable `JSX with Vue.js`_ by configuring the 2nd parameter of the ``.ena
60
61
+ })
61
62
;
62
63
63
- Next, run or restart Encore. When you do, you will see an error message helping you
64
- install any missing dependencies. After running that command and restarting
64
+ Next, run or restart Encore. When you do, you will see an error message helping
65
+ you install any missing dependencies. After running that command and restarting
65
66
Encore, you're done!
66
67
67
68
Your ``.jsx `` files will now be transformed through ``@vue/babel-preset-jsx ``.
68
69
69
70
Using styles
70
71
~~~~~~~~~~~~
71
72
72
- You can't use ``<style> `` in ``.jsx `` files.
73
- As a workaround, you can import ``.css ``, ``.scss ``, etc, files manually:
73
+ You can't use ``<style> `` in ``.jsx `` files. As a workaround, you can import
74
+ ``.css ``, ``.scss ``, etc. files manually:
74
75
75
76
.. code-block :: javascript
76
77
@@ -91,14 +92,15 @@ As a workaround, you can import ``.css``, ``.scss``, etc, files manually:
91
92
92
93
.. note ::
93
94
94
- Importing styles this way make them global.
95
- See the next section for scoping them to your component.
95
+ Importing styles this way makes them global. See the next section for
96
+ scoping them to your component.
96
97
97
98
Using Scoped Styles
98
99
~~~~~~~~~~~~~~~~~~~
99
100
100
- You also can't use `Scoped Styles `_ (``<style scoped> ``) in ``.jsx `` files.
101
- As a workaround, you can use `CSS Modules `_ by suffixing import paths with ``?module ``:
101
+ You can't use `Scoped Styles `_ (``<style scoped> ``) either in ``.jsx `` files. As
102
+ a workaround, you can use `CSS Modules `_ by suffixing import paths with
103
+ ``?module ``:
102
104
103
105
.. code-block :: javascript
104
106
@@ -132,8 +134,8 @@ The output will be something like ``<h1 class="h1_a3dKp">Hello World</h1>``.
132
134
Using images
133
135
~~~~~~~~~~~~
134
136
135
- You can't use ``<img src="./image.png"> `` in ``.jsx `` files.
136
- As a workaround, you can import them with ``require() `` function:
137
+ You can't use ``<img src="./image.png"> `` in ``.jsx `` files. As a workaround,
138
+ you can import them with ``require() `` function:
137
139
138
140
.. code-block :: javascript
139
141
0 commit comments