How to correctly add my less file to Magento 2?

The question:

  1. Create theme app/design/frontend/Vendorname/default
  2. Try add my.less file for impot, or add code with new class and style to _extends.less to app/design/frontend/Vendorname/default/web/css/sourse.
  3. rm -rf pub/static/*
  4. rm -rf var/view_preprocessed/*
  5. php /var/www/html/bin/magento cache:clean
  6. php /var/www/html/bin/magento setup:static-content:deploy
  7. php /var/www/html/bin/magento cache:clean

But this not work.
I read a lot, but I do not see a particular decision. Please write how to correctly add less file to Magento 2? Please help.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

We can import by using @import or @magento_import directive

1) The @import directive rules of usage

@import 'your_custom.less';

2) The @magento_import directive – must be commented out with two slashes

//@magento_import 'your_custom.less';

For example: your_custom.less is under app/design/frontend/Vendor/Theme/web/css/source/

app/design/frontend/Vendor/Theme/web/css/source/_extend.less

@import 'your_custom.less';

You can read more here: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-preprocess.html


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment