Skip to content

Adding file-loader dependency. #15344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion frontend/encore/copy-files.rst
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Referencing Image files from a Template

To reference an image file from outside of a JavaScript file that's processed by
Webpack - like a template - you can use the ``copyFiles()`` method to copy those
files into your final output directory.
files into your final output directory. First enable it in ``webpack.config.js``:

.. code-block:: diff
Expand All @@ -51,6 +51,10 @@ files into your final output directory.
+ //pattern: /\.(png|jpg|jpeg)$/
+ })
Then restart Encore. When you do, it will give you a command you can run to
install any missing dependencies. After running that command and restarting
Encore, you're done!

This will copy all files from ``assets/images`` into ``public/build`` (the output
path). If you have :doc:`versioning enabled <versioning>`, the copied files will
include a hash based on their content.
Expand Down
32 changes: 17 additions & 15 deletions frontend/encore/postcss.rst
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,26 @@ PostCSS and autoprefixing (postcss-loader)
`PostCSS`_ is a CSS post-processing tool that can transform your CSS in a lot
of cool ways, like `autoprefixing`_, `linting`_ and more!

First, download ``postcss-loader`` and any plugins you want, like ``autoprefixer``:
First enable it in ``webpack.config.js``:

.. code-block:: diff

// webpack.config.js

Encore
// ...
+ .enablePostCssLoader()
;

Then restart Encore. When you do, it will give you a command you can run to
install any missing dependencies. After running that command and restarting
Encore, you're done!

Next, download any plugins you want, like ``autoprefixer``:

.. code-block:: terminal

$ yarn add postcss-loader autoprefixer --dev
$ yarn add autoprefixer --dev

Next, create a ``postcss.config.js`` file at the root of your project:

Expand All @@ -24,19 +39,6 @@ Next, create a ``postcss.config.js`` file at the root of your project:
}
}

Then, enable the loader in Encore!

.. code-block:: diff

// webpack.config.js

Encore
// ...
+ .enablePostCssLoader()
;

Because you just modified ``webpack.config.js``, stop and restart Encore.

That's it! The ``postcss-loader`` will now be used for all CSS, Sass, etc files.
You can also pass options to the `postcss-loader`_ by passing a callback:

Expand Down
1 change: 0 additions & 1 deletion frontend/encore/reactjs.rst
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ Using React? First add some dependencies with Yarn:

.. code-block:: terminal

$ yarn add @babel/preset-react --dev
$ yarn add react react-dom prop-types

Enable react in your ``webpack.config.js``:
Expand Down