Magento 2.3自定义主题如何覆盖HEAD中CSS/JS的type属性

嘿，我明白你遇到的问题了——直接在default_head_blocks.xml里添加带自定义type的文件会导致重复的type属性，这是因为Magento的布局系统会把你添加的新属性和默认属性叠加，而不是替换掉原来的。别担心，咱们用下面的方法就能搞定：

正确的实现步骤 #

1. 先移除默认加载的文件：在你的主题Magento_Theme/layout/default_head_blocks.xml文件中，先用<remove>标签把默认的CSS/JS文件移除，这样就不会有重复的声明了。
2. 重新添加带自定义type的文件：接着再把这些文件重新添加回来，同时指定你想要的自定义type属性。

最终的XML代码应该是这样的：

<?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>
        <!-- 移除默认的文件实例 -->
        <remove src="mage/calendar.css"/>
        <remove src="requirejs/require.js"/>
        <remove src="mage/polyfill.js"/>

        <!-- 重新添加带自定义type的版本 -->
        <css src="mage/calendar.css" type="text/css/custom"/>
        <script src="requirejs/require.js" type="text/javascript/custom"/>
        <script src="mage/polyfill.js" type="text/javascript/custom"/>
    </head>
</page>

关键注意事项 #

• 文件路径要正确：确保你的default_head_blocks.xml放在主题的正确路径下：app/design/frontend/[你的Vendor名]/[你的Theme名]/Magento_Theme/layout/default_head_blocks.xml
• 清理缓存：修改完XML后，一定要运行以下命令清理缓存，或者在Magento后台的缓存管理中清理：

  bin/magento cache:clean
  bin/magento cache:flush
  

  这样才能让新的布局配置生效。

这样操作之后，页面输出的link和script标签就只会有你自定义的type属性，不会再出现重复的声明啦！

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