16

How do you use less inside custom module

having created code/Vendor/module/view/frontend/web/css/source/custom.less

how do I include and compile?

4 Answers 4

54

You need to upgrade the source to include the @import command in the style-l.less file with:-

php bin/magento setup:upgrade

Then you need to deploy static content to compile your less files with:-

php bin/magento setup:static-content:deploy

Also by convention the file should be named:-

code/Vendor/module/view/frontend/web/css/source/_module.less
3
  • 3
    this is the only clean way to to this! thank you! Sep 27, 2016 at 13:11
  • 2
    This answer should be accepted. Feb 16, 2017 at 20:28
  • 4
    Worked for me! Only thing that got me was that the _module.less file needs to literally be named that -- not _<your_module_name>.less Feb 2, 2018 at 14:57
5

I searched all Magento modules for .less files, and found none, which suggests to me that LESS is reserved to themes, and not modules.

You CAN write CSS for your module, however. I found an example in module-swatches.

view/frontend/css/swatches.css

Then

view/frontend/layout/catalog_category_view.xml

<head>
    <css src="Magento_Swatches::css/swatches.css"/>
</head>
3
  • 1
    thanks for feedback I done the same in vendor/magento no less files. so what is the point all about this less if you can not use as standalone. I'm quite beginner in magento but creating a custom modules frontend brings me back to old things. It means make less somewhere else and compile for magento module?
    – fefe
    Apr 20, 2016 at 19:05
  • LESS is used in theme files. My guess is that forcing LESS into a theme, a developer can't create a module that doesn't fit in with the design of a store. This may be helpful: devdocs.magento.com/guides/v2.0/ui-components/ui-form.html If you use standard Magento elements as much as possible, they will have the standard Magento CSS classes that a theme can leverage
    – andyjv
    Apr 20, 2016 at 19:41
  • You can use less but you shouldn't focus much on theming. With the swatches example included in the answer, you would just make a css/swatches.less and Magento would compile it for you.
    – Navarr
    Dec 19, 2016 at 15:28
3

You can add it by giving the naming as "_module.less" at below path, Magento will include it by default and you don't need to code anywhere to call it:

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

For more details about less and extending the core less files (using _extend.less), you can visit the below link: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html

0

From the Magento frontend developer guide:

Include CSS

"In the Magento application, the recommended way to include stylesheets is to specify them in layout files.

Usually, the stylesheets you include should be available for all store pages. To achieve this, include your CSS in default_head_blocks.xml of the Magento_Theme module, which defines the default page section for all Magento pages. The recommended way to do this is adding an extending default_head_blocks.xml in your theme, and including the required stylesheets in this file.

You can find more details here:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html

1
  • thanks this talks about themes if I do not understand wrong!
    – fefe
    Apr 20, 2016 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.