Symfony 4 and webpack encore, looking for good practice when adding a CSS third library

Question

I'm on a Symfony 4 new project.

Via yarn, I installed (by example) the CSS library animate.css

yarn install animate.css

From the webpack.config.js file, I added the animate.css file like that :

.addStyleEntry('animate', './node_modules/animate.css/animate.css')

My question is : is it a good way to add a CSS library like that ? I'm not sure if use directly the node_module path is a good practice..

Is there a better way ?

Avior · Accepted Answer · 2019-11-14 09:56:17Z

1

Normally you inject it directly in the .js file you are using

ex:

require('animate.css/animate.css')

or something in this way depending on your js superset if you have one so it will generate a .css file with your .js

an example is this: on my first line of my typescript file I call this import ./style.css
after that Encore will generate me a nwe .css file that i can use in my template using {{ encore_entry_link_tags('entry') }}

edited Nov 14, 2019 at 9:56

answered Nov 13, 2019 at 14:17

Avior

5296 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

spacecodeur Over a year ago

This is the point, and I don't think it is good because I just want load a pure css library, Is a bit illogical to use a js way for load a pure css no ?

Avior Over a year ago

it is only in compile time, webpack Encore will generate a .css file and you would use this {{ encore_entry_link_tags('entry') }} to import your css

Collectives™ on Stack Overflow

Symfony 4 and webpack encore, looking for good practice when adding a CSS third library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related