在LESS中导入引导程序不起作用(仅按名称解析元素) [英] Importing bootstrap in LESS not working (element is resolved only by name)

问题描述

简而言之，我的结构如下:

In Short, i got following structure:

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

-- _components
--- _forms.less

-- all.less

所有(还有更多)全部导入.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";

当我尝试在Shopware中编译所有内容时，出现错误:

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;

这意味着我的_forms.less在第250行出现错误. 第250行看起来像这样:

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;
      }

当我将鼠标悬停在PHPStorm中的@ screen-xs-max变量时，它说:

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

仅通过名称解析元素"screen-xs-max"，而无需使用 明确进口

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

当我直接在all.less中使用变量时(从其导入中删除_forms.less后)，它就可以正常工作.

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

对此有何建议?

推荐答案

此PhpStorm批注只是一个警告，在使用Shopware模板时通常可以忽略.

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

您应该检查变量@screen-xs-max是否真的在某个地方定义了，因为它不是shopware的默认断点.没有进一步的定义，只有这些断点可用:

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

还要确保您不会与默认的Shopware断点发生冲突，并且将来还会遇到其他有害行为.例如:

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) {
    ...
}

这篇关于在LESS中导入引导程序不起作用(仅按名称解析元素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！