Magento2中如何在指定XML文件引入less并仅在catalog页面生效

失效原因说明 #

你之前的方案无法生效是因为主流的XML布局+LESS架构（以Magento2为例）不会处理CSS文件内导入的LESS资源，预编译逻辑仅对直接引入的LESS文件生效。如果是其他采用XML布局的前端/后端框架，逻辑基本一致，无需用CSS文件中转LESS。 #

具体实现步骤 #

1. 放置LESS文件到指定路径 #

将你需要引入的LESS文件放到自定义主题的静态资源目录下，Magento2示例路径如下：
app/design/frontend/<你的厂商名>/<你的主题名>/web/css/source/catalog-custom.less
你也可以根据自己的项目规则调整路径，只要保证路径在项目可识别的静态资源目录下即可。

2. 编辑catalog页面专属布局XML #

catalog分类页对应的唯一布局文件为catalog_category_view.xml，仅在catalog分类页加载，Magento2下需要将该文件放到主题的对应模块目录下：
app/design/frontend/<你的厂商名>/<你的主题名>/Magento_Catalog/layout/catalog_category_view.xml
在XML文件的<head>节点内添加LESS文件引入规则，完整示例如下：

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/source/catalog-custom.less" />
    </head>
</page>

如果你需要让该LESS同时对商品详情页生效，额外在catalog_product_view.xml文件中添加同样的<css>规则即可。

3. 执行更新命令生效 #

修改完成后执行对应命令更新静态资源：

• 清理缓存：bin/magento cache:clean
• 生产环境需要额外执行静态资源部署：bin/magento setup:static-content:deploy -f

内容的提问来源于stack exchange，提问作者Emily