Best practices adding css/less to custom widget block

Question

I created a custom widget inside my module and I'm trying to figure out how to add css to widget template. I can do it with the styles tag inside my template (phtml) but I assume that is not the right way?

How should you add custom css / less code to your widget block?

• fmsthird: I think better to add it on a head block
• fmsthird: although your css will be loaded in the frontend in general not when your widget is loaded only

Answer 1

Within your custom widget module create the following file:

view/frontend/web/css/source/_extend.less

Add the following code to _extend.less:

@import 'widget/example.less';

Create your .less file here:

view/frontend/web/css/source/widget/example.less