在更短的导入引导不工作（元素仅通过名称解析）(Importing bootstrap in LESS

总之，我得到了以下结构：

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

当我将鼠标悬停在PHPStorm的@屏幕-XS-MAX变量，它说：

元素“屏幕-XS-MAX”仅由名称解析，而不使用明确的进口

当我在all.less直接使用变量（除去其进口_forms.less后），它工作得很好。

这有什么建议？

Answer 1:

这PhpStorm注释仅仅是一个警告，并与shopware模板工作时，通常可以忽略不计。

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

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

另外，还要确保你不使用默认的shopware的断点碰撞，会遇到其他不必要的行为的道路。 例如：

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

文章来源: Importing bootstrap in LESS not working (element is resolved only by name)