为什么包含自定义css文件后在magento2.2.3中不应用样式

Question

我在我的Magnetico主题中使用 magento2.2.3 版本在以下路径中添加了自定义css文件 专案/app/design/frontend/vendor/theme/web/css/custom.css

，并在 default_head_blocks.XML 文件中添加了源文件。 之后，在HTML内容中添加了一个包含以下代码的页面

<div class="freegotest"><span class="tested">count down custom code</span></div>

在custom.css代码中为

.tested{ 
color: red !important; 
font-size: 20px;}

通过查看页面源，标题中包含了自定义css文件，但是样式不适用于文本。

Answer 1

您的XML文件必须命名为 default_head_blocks.xml ，而不是 default_head_blocks.XML 。

更改名称后，清除缓存和静态文件：

1. 检查是否通过命令行使用开发模式

php bin/magento deploy:mode:show

1. 如果开发人员模式设置为production，请尝试重新构建静态内容

php bin/magento setup:static-content:deploy

1. 在任何情况下（生产或开发人员），清除所有缓存的文件

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush;

希望有帮助

Answer 2

从2.1升级到2.3.2后，我发现自定义主题中的自定义色板Magento_Swatches / web / css / swatches.css内容的css不会合并到styles-m.css和styles-l.css中产品详细信息页面上的布局问题。

研究之后，我无法确定如何使Magento 2.3.2合并自定义CSS文件到styles-m.css和styles-l.css

因此，我决定为Magento_Swatches创建一个新的.less文件。我在自定义主题中创建了新文件Magento_Swatches / web / css / source / _module.less，然后移动

的所有内容

Magento_Swatches / web / css / swatches.css

到

Magento_Swatches / web / css / source / _module.less

然后运行命令setup：upgrade

Hozaaaaaay！问题已解决，所有自定义CSS均合并到styles-m.css和styles-l.css中 看起来像Magento 2.3.2不允许在模块中直接使用.css