简而言之,我的结构如下:
- 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;
这意味着我在第250行的_forms.less中有一个错误。第250行如下所示:
@media (max-width: @screen-xs-max) {
height: 35px;
width: 40px;
background-color: black;
color: @white;
border-left: 5px solid @white;
}
当我在PHPStorm中悬停@screen变量时,它说:
元素“screen xs-max”仅按名称解析,而不使用显式导入。
当我在all.less中直接使用这个变量时(在从它的导入中删除_forms.less之后),它工作得很好。
对此有什么建议吗?
发布于 2017-06-20 11:37:15
这个PhpStorm注释只是一个警告,通常可以在使用购物器模板时忽略它。
您应该检查变量@screen-xs-max
是否实际上是在某个地方定义的,因为它不是购物器默认断点。在没有进一步定义的情况下,只有这些断点可用:
@phoneLandscapeViewportWidth: 30em; // 480px
@tabletViewportWidth: 48em; // 768px
@tabletLandscapeViewportWidth: 64em; // 1024px
@desktopViewportWidth: 78.75em; // 1260px
另外,确保你不会与默认的购物器断点碰撞,并将经历其他不必要的行为在道路上。例如:
@media screen and (max-width: @tabletLandscapeViewportWidth) {
...
}
https://stackoverflow.com/questions/44415965
复制相似问题