0

简而言之，我得到以下结构：

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

-- _components
--- _forms.less

-- all.less

一切（还有一些）都导入到 all.less 中，看起来像这样：

@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 中的所有内容时，我收到错误消息：

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 行如下所示：

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

当我将@screen-xs-max 变量悬停在 PHPStorm 中时，它会显示：

元素“screen-xs-max”仅通过名称解析而不使用显式导入

当我直接在 all.less 中使用变量时（在从其导入中删除 _forms.less 之后）它工作得很好。

对此有什么建议吗？

4

1 回答 1

1

这个 PhpStorm 注释只是一个警告，在使用商店软件模板时通常可以忽略。

您应该检查该变量@screen-xs-max是否实际上是在某个地方定义的，因为它不是商店软件的默认断点。如果没有进一步的定义，只有这些断点可用：

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

还要确保您不会与默认的商店软件断点发生冲突，并且会在以后遇到其他不需要的行为。例如：

@media screen and (max-width: @tabletLandscapeViewportWidth) {
    ...
}
于 2017-06-20T11:37:15.110 回答