Magento 2 - use LESS variables in custom LESS file

Question

I added bootstrap 4 to my site, but it overwrites many magento 2 core css.

So I added a new file THEME\web\css\bootstrap.less where I try to fix these problems, and added it to my THEME\Magento_Theme\layout\default_head_blocks.xml.

THEME\web\css\bootstrap.less:

body {
 font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif !important;
 font-size: @font-size__base;
 line-height: 1.42857143;
}
.nav { display: block; }

But if I compile then I get NameError: variable @font-size__base is undefined in pub/static/frontend/company/fresh/de_DE/css/bootstrap.less on line 3, column 16:, because I am using the variable @font-size__base which is defined in lib\web\css\source\lib\variables\_typography.less

How can I use magento less core variables in my custom css file?

My theme inherits from magento luma.

Answer 1

Instead of creating new bootstrap.less file, please create _bootstrap.less file in <your_theme>/web/css/source/extends directory.

Then:

1. Create the _extend.less file in <your_theme>/web/css/source/

2. Import your _bootstrap.less in this file:

   @import 'extends/_bootstrap.less';

3. Make sure that your theme inherits from Magento/luma or Magento/blank theme - this is necessary if you want to use Magento variables

4. Recompile your styles

I hope this helps you. Thanks, Marcin

• Black: Thank you, but this will compile my bootstrap.less into the files styles-l.css and styles-m.css which both get loaded before the bootstrap 4 css file. This means that my overwrites will get overwritten again by bootstrap 4 ... So I need a separate css file which gets loaded after the bootstrap 4 css file.