Using Webpack (material components)

Take a look at the official documentationby material. However there are some additional steps which are necessary in our project.

1. Installation

npm install @material/PACKAGE NAME

2. Rebuild the docker Container

3. Styles

Add @use and @include statements in _base.scss, @import statements in the specific .scss file.

4. JavaScript instantiation

Create a JS file in assets/js/ and instantiate the components.

5. Add entry of this file to webpack.config.js

.addEntry('ENTRY NAME', './assets/js/FILE)

6. Edit the html.twig file Add the html to your html.twig file. Insert into the js block at the end of the file:

{{ encore_entry_script_tags('ENTRY NAME') }}

7. Run encore and grunt:

docker exec -it app.catroweb npm run encore dev

docker exec -it app.catroweb grunt