为什么在包含自定义 CSS 文件后我的样式没有应用？

Question

我正在使用 Magento 2.2.3。在我的磁电机主题中，在以下路径中添加了自定义 CSS 文件：project/app/design/frontend/vendor/theme/web/css/custom.css

我在 default_head_blocks.XML 文件中添加了源文件。之后在 HTML content

中添加了一个包含以下代码的页面

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

在custom.css中编码为

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

通过查看页面源代码，我可以看到 header 中包含自定义 CSS 文件，但样式不适用于文本。

Answer 1

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

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

php bin/magento deploy:mode:show

php bin/magento setup:static-content:deploy

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

Answer 2

从 2.1 更新到 2.3.2 后，我发现我的自定义 CSS 色板 Magento_Swatches/web/css/swatches。css 自定义主题中的内容没有合并到样式中-m.css & 样式-l.css。这导致了产品详细信息页面中的布局问题。

我找不到如何让 Magento 2.3.2 将自定义 CSS 文件合并到样式-m.css & 样式-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

之后问题解决，所有自定义CSS合并到styles-m.css & styles-l.css

貌似Magento 2.3.2不允许直接在模块中使用CSS。

Why are my styles not applying after a custom CSS file is included?