1

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.

Improve this question

1 Answer 1

Reset to default
0

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

Improve this answer
1
  • 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.
    – Black
    Commented Aug 27, 2020 at 14:00

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.