4

I'm having a problem creating my own less file in my Magento 2? there's a tutorial by Alan Storm through the way he creates a custom less file is by using a module, is there a way to do it without using a module? I'm creating a breakpoint less file.

Thanks!

1
  • Can you provide what you have tries with file path and commands you followed. Aug 7, 2016 at 7:35

2 Answers 2

5

Just add new file named breakpoint.less at below path:

app\design\frontend\<Vendor>\<Themename>\web\css\source\

and import this file in _sources.less file given path below:

app\design\frontend\<Vendor>\<Themename>\web\css\source\

import your file

(if there is not available _sources.less file in your theme then go to vendor\magento\theme-frontend-blank\web\css\source folder and copy file in your custom theme)

@import 'breakpoint.less';
  1. clear cache
  2. php bin/magento setup:static-content:deploy
1
  • nothing happen my friend it compile and deploy but the less file is not loading :( Aug 8, 2016 at 12:08
2
  • Create your less file in the same location that you would normally create the CSS file, just be sure to use the extension .less
  • Location of the file should be {module_root_dir}/view/{base|adminhtml|frontend}/path/to/file.less
  • Clear your pub/static dir or at least clear the directory in pub/static
  • Reference your file in your layout xml file like so

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="Vendorname_Modulename::path/to/file.less"/>
        </head>
    </page>
    
  • Clear your cache

  • bin/magento setup:static-content:deploy

If your css file is still not showing its effect on your page, check the page source and see if it's even being attempted to be included.

4
  • thank you for your instruction i'm having an error when compiling here is the error. Aug 8, 2016 at 11:09
  • variable @media-common is undefined in file my less is located on app/design/frontend/vendor/theme/web/css/breakpoint.less. Aug 8, 2016 at 11:32
  • Remove frontend folder given path 'pub\static\frontend' and cache, Clear your cache and bin/magento setup:static-content:deploy Sep 2, 2016 at 12:54
  • 2
    @DipeshRangani isn't that exactly what I stated in my answer? Sep 2, 2016 at 14:16

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.