Importing bootstrap in LESS not working (element i

Question

In Short, i got following structure:

- less
-- node_modules
--- bootstrap
----less
----- ALL BOOTSTRAP DATA

-- _components
--- _forms.less

-- all.less

Everything (there are some more) is imported in all.less, it looks like this:

@import "node_modules/bootstrap/less/bootstrap";

// Font Awesome
@fa-font-path: '../fonts';

@import "_base/_variables";
@import "_base/_base";
@import "_base/_mobile";
@import "_base/_sections";
@import "_base/_typography";

@import "_components/_buttons";
@import "_components/_carousel";
@import "_components/_checkbox";
@import "_components/_dropdown";
@import "_components/_forms";
@import "_components/_helper";
@import "_components/_hover";
@import "_components/_modal";
@import "_components/_navbar";
@import "_components/_sidebar";
@import "_components/_table";

@import "_modules/_kollektion";
@import "_modules/_produkt";
@import "_modules/_register";
@import "_modules/_startseite";
@import "_modules/_warenkorb";

When i try to compile everything inside of Shopware i get the error:

Während der Bearbeitung von Shop "TEST" ist ein Fehler aufgetreten: in _forms.less on line 250, column 7 248| top: 0; 249| 250| @media (max-width: @screen-xs-max) { 251| height: 35px; 252| width: 40px; 253| background-color: black;

That means there is an error in my _forms.less on line 250. Line 250 looks like this:

@media (max-width: @screen-xs-max) {
        height: 35px;
        width: 40px;
        background-color: black;
        color: @white;
        border-left: 5px solid @white;
      }

When i hover the @screen-xs-max variable in PHPStorm it says:

Element "screen-xs-max" is only resolved by name without using explicit imports

When i use the variable directly in the all.less (after removing the _forms.less from its import) it works just fine.

Any suggestions for this?

Answer 1

This PhpStorm annotation is only a warning and can usually be ignored while working with shopware templates.

You should check, whether the variable @screen-xs-max is actually defined somewhere at all, because it is not a shopware default breakpoint. Without further definitions only these breakpoints are available:

@phoneLandscapeViewportWidth: 30em;     // 480px
@tabletViewportWidth: 48em;             // 768px
@tabletLandscapeViewportWidth: 64em;    // 1024px
@desktopViewportWidth: 78.75em;         // 1260px

Also make sure you don't collide with the default shopware-breakpoints and will experience other unwanted behaviour down the road. e.g.:

@media screen and (max-width: @tabletLandscapeViewportWidth) {
    ...
}