5

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?

26

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
  • 2
    this is the only clean way to to this! thank you! – Philipp Sander Sep 27 '16 at 13:11
  • 1
    This answer should be accepted. – Darren Felton Feb 16 '17 at 20:28
  • 3
    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 – user3116226 Feb 2 '18 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>
  • 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 '16 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 '16 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 '16 at 15:28
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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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