如何在Magento 2中添加自定义CSS文件

有没有办法创建自己的CSS文件，该文件在层叠中最后加载？

如果是这样，如何以及在哪里添加自定义CSS文件？

magento2 css

— 费伦斯
source

Answers:

为了添加自定义CSS并最后加载，您必须设置一个自定义主题。

创建主题：http : //devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
确保将您的Magento应用程序设置为开发人员模式。
将以下文件夹添加到您的自定义主题

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

创建以下文件：

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

将此代码放在default_head_blocks.xml中

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

应用您的主题：http : //devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
部署静态资源（SSH到magento根目录）：

php bin/magento setup:static-content:deploy

— 约书亚记34
source

嗨，我只是这样做了，但是我添加的css文件没有加载，并且当我检查页面时，它给我该文件的GET错误，并显示500（内部服务器错误），您知道它的含义是什么可能？

— alexcr '17

部署的CLI命令：php bin / magento setup：static-content：deploy

— Joshua34

我应该在创建的两个新CSS文件中放什么？只是纯CSS？

— styzzz

@styzzz是的，原始CSS可以。

— Joshua34年

对。我只是这样做，将local-m.css和local-l.css文件上传到了web / css。...清除了缓存并运行了php bin / magento setup：static-content：deploy。我处于开发人员模式。它仍然没有接他们。我的default_head_blocks.xml与上面的完全一样。但是它仍然没有使用我在CSS中设置的那些类型

— -styzzz

为了添加自定义css并最后加载

遵循目录结构

应用程序/代码/供应商/模块名称/视图/前端（用于adminadminhtml）/web/css/filename.css

将css文件路径添加到相应的布局文件中，如下所示

<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>

— 曼尼什
source

包括Vendor_Module对我不起作用。删除它工作正常。

— Saravanan DS

@SaravananDS，您需要用软件包和模块名称替换。

— Manish

是。用我的自定义替换后，Vendor_Module它不起作用。

— Saravanan DS

@Manish，我们只能在搜索结果页面中加载自定义CSS文件吗？

— 贾法尔·平贾（Jafar Pinjar）

这里不需要使用儿童主题吗？

— HaFiz Umer

您可以将magento 2将放置在head部分中CSS末尾的media属性。设置仅1px的宽度将在所有设备上启用它：

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— 密码机909
source

谢谢，您救了我的日子。我想使用.less文件并在每次编辑它们时进行编译。

— bourax

这里不需要先制作自定义主题吗？

— HaFiz Umer

@HaFizUmer您应该先创建一个自定义主题。按照接受的答案中的说明进行操作，然后使用此处显示的方法。

— Cypher909