_theme中变量较少的问题。更少

magento.stackexchange https://magento.stackexchange.com/questions/112855

题

我在我的自定义_theme中使用下面的媒体查询。不像

& when (@media-common = true) { }

但是当我执行这个命令 bin/magento setup:static-content:deploy 我变了 @media-common is undefined in file 在这种情况下，什么是错的？使用grunt编译没有任何错误。

有帮助吗？

解决方案

@费夫 @media-common 变量最初设置在:

  • vendor/magento/theme-frontend-blank/web/css/styles-m.less

  • vendor/magento/theme-frontend-blank/web/css/styles-l.less

这是 如果 您正在使用blank或luma主题作为父主题。如果是这样，那么这适用于你。如果不是，那么无论你的父主题是什么，都应该有这个变量的声明和初始化。..或者，如果您使用的父主题为其父主题调用另一个主题，则同样适用。

看看 styles-m.less 和 styles-l.less 文件以查看导入较少文件的顺序。您还可以在以下位置添加某种形式的日志记录 \Less_Parser::parseFile().

我解决这个问题的方法是使用较少的引用导入 更少的文档:参考导入选项, ，其将 不是 拉入所述Less文件中的代码，它只会使文件在请求导入的文件范围内可用。

我在自定义Less文件顶部导入的示例:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

*注意我在这里使用的路径相对于我的自定义主题的自定义文件路径相对于最终的 var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ 路径。

我的自定义主题目录层次结构如下所示: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

我要导入的文件在这里:

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

我的自定义文件，这将是做导入，最终会住在这里:

  • var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

现在，所有这些都说这里是踢球者，你真的不需要这样做。为啥?那么，css样式不是在 CSS守卫, ，在这种情况下 @media-common = true 只意味着被称为 styles-m.less 档案？是的，因为M2应该是移动的，因此 styles-m.less 文件是唯一的文件（保存一些电子邮件较少的文件，我认为其他几个），实际上有 @media-common 设置为 true （并且只有少数文件甚至设置了这个变量，period）。

所以任何在CSS保护器中具有以下条件的东西 @media-common = true 是为了永远运行，除了当 styles-l.less 文件被调用。 styles-l.less 套件 @media-common 到 false 作为 styles-m.less 文件应该已经加载了这些"常见"样式。..如果你往里看 vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml 你会看到的 styles-m.css （从 styles-m.less 如果尚未生成 发展文件:.css请求。少搜索 - 更多 这里）之前加载 styles-l.css.

这意味着你可以通过定义来解决这个错误 @media-common: true; 在自定义Less文件的顶部，根据我上面描述的内容以及到目前为止我对代码的理解，这应该可以解决错误。

问题就在这里: 你是否包括 source/lib/_responsive.less & source/lib/variables/_responsive.less 文件或定义自己的文件 @media-common: true; 在自定义文件的顶部，这将复盖 @media-common: false; 转让契 styles-l.less, ，所以你会得到两个代码重复 styles-m.less 和 styles-l.less.我现在看不出有什么办法。这样做的根本问题是我们的自定义Less文件没有被加载 之后 两者兼而有之 styles-m.less 和 styles-l.less 或者说 @media-common 变量的值没有被带入我们自定义的Less文件的范围。这不应该是这种情况，如果我们通过 _extend.less 文件，文档（建议），因为您在两者的末尾都有以下内容 styles-m.less 和 styles-l.less:

//@magento_import 'source/_extend.less';

我希望这给了你们两个洞察力和一个立即解决你的问题的方法。

如果你或其他人想出一个更好的解决方案，我洗耳恭听。

更新资料 所以忽略我上面提到的关于代码重复的内容。在我的情况下，我都在页面中添加了我的自定义css的明确包含 和 我还将我的自定义less文件添加到我的主题中 _extend.less.

我在修改 app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml 要包括以下内容:

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

我也有一个条目 app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less 的:

@import "../pages/homepage.less";

我发现它要么要么要么，而不是两者兼而有之。所以在这种情况下，当M2试图处理一个请求 http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css 它会加载适当的 homepage.less 文件和这个文件不会有 @media-common 在它的范围内，所以错误说明了问题。为了解决这个问题，请添加我上面提到的导入引用，它们不会重复任何代码。此外，但从删除条目 _extend.less 我的 styles-m.less 和 styles-l.less 不会去找 homepage.less 文件，没有代码重复。

  • 我这里的例子是针对特定于主页的样式。..但这说明了我没有正确使用系统的情况，这就是为什么我得到这个错误。我希望这有助于
许可以下： CC-BY-SA 和 归因
scroll top