Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit478b93d

Browse files
committed
More rewords and removed the addStyleEntry() method
1 parentf855793 commit478b93d

File tree

1 file changed

+22
-46
lines changed

1 file changed

+22
-46
lines changed

‎frontend/encore/simple-example.rst‎

Lines changed: 22 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@ an ``assets/`` directory:
77
* ``assets/js/app.js``
88
* ``assets/css/app.scss``
99

10+
Let's consider that the project follows the recommended practice of importing
11+
the CSS files for their associated JavaScript files:
12+
13+
..code-block::javascript
14+
15+
// assets/js/app.js
16+
require('../css/app.scss');
17+
18+
// ...rest of JavaScript code here
19+
1020
With Encore, we can easily minify these files, pre-process ``app.scss``
1121
through Sass and a *lot* more.
1222

@@ -31,11 +41,8 @@ Inside, use Encore to help generate your Webpack configuration.
3141
// empty the outputPath dir before each build
3242
.cleanupOutputBeforeBuild()
3343
34-
// will output as web/build/js/app.js
35-
.addEntry('js/app','./assets/js/app.js')
36-
37-
// will output as web/build/css/app.css
38-
.addStyleEntry('css/app','./assets/css/app.scss')
44+
// will create web/build/app.js and web/build/app.css
45+
.addEntry('app','./assets/js/app.js')
3946
4047
// allow sass/scss files to be processed
4148
.enableSassLoader()
@@ -78,7 +85,7 @@ Actually, to use ``enableSassLoader()``, you'll need to install a few
7885
more packages. But Encore will tell you *exactly* what you need.
7986

8087
After running one of these commands, you can now add ``script`` and ``link`` tags
81-
to the new, compiled assets (e.g. ``/build/css/app.css`` and ``/build/js/app.js``).
88+
to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
8289
In Symfony, use the ``asset()`` helper:
8390

8491
..code-block::twig
@@ -88,11 +95,11 @@ In Symfony, use the ``asset()`` helper:
8895
<html>
8996
<head>
9097
<!-- ... -->
91-
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
98+
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
9299
</head>
93100
<body>
94101
<!-- ... -->
95-
<script src="{{ asset('build/js/app.js') }}"></script>
102+
<script src="{{ asset('build/app.js') }}"></script>
96103
</body>
97104
</html>
98105
@@ -119,7 +126,7 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
119126

120127
..code-block::javascript
121128
122-
// assets/js/main.js
129+
// assets/js/app.js
123130
124131
// loads the jquery package from node_modules
125132
var $=require('jquery');
@@ -136,44 +143,13 @@ That's it! When you build your assets, jQuery and ``greet.js`` will automaticall
136143
be added to the output file (``app.js``). For common libraries like jQuery, you
137144
may want also to:doc:`create a shared entry</frontend/encore/shared-entry>` for better performance.
138145

139-
Requiring CSS Files from JavaScript
140-
-----------------------------------
141-
142-
Above, you created an entry called ``js/app`` that pointed to ``app.js``:
143-
144-
..code-block::javascript
145-
146-
Encore
147-
// ...
148-
.addEntry('js/app','./assets/js/app.js')
149-
;
150-
151-
Once inside ``app.js``, you can even require CSS files:
152-
153-
..code-block::javascript
154-
155-
// assets/js/app.js
156-
// ...
157-
158-
// a CSS file with the same name as the entry js will be output
159-
require('../css/app.scss');
160-
161-
Now, both an ``app.js`` **and** an ``app.css`` file will be created in the
162-
``build/js/`` dir. You'll need to add a link tag to the ``app.css`` file in your
163-
templates:
164-
165-
..code-block::diff
166-
167-
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
168-
+ <link rel="stylesheet" href="{{ asset('build/js/app.css') }}">
169-
170-
This article follows the traditional setup where you have just one main CSS file
171-
and one main JavaScript file. In lots of modern JavaScript applications, it's
172-
common to have one "entry" for each important section (homepage, blog, store, etc.)
146+
Multiple JavaScript Entries
147+
---------------------------
173148

174-
In those applications, it's better to just add JavaScript entries in the Webpack
175-
configuration file and import the CSS files from the JavaScript entries, as
176-
shown above:
149+
The previous example is the best way to deal with SPA (Single Page Applications)
150+
and very simple applications. However, as your application grows, you'll need to
151+
define more entries with the JavaScript and CSS code of some specific sections
152+
(homepage, blog, store, etc.)
177153

178154
..code-block::javascript
179155

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp